Copyright © tutorialspoint.com
There is following method required to create a pattern on the canvas:
SN | Method and Description |
---|---|
1 | createPattern(image, repetition) This method will use image to create the pattern. The second argument could be a string with one of the following values: repeat, repeat-x, repeat-y, and no-repeat. If the empty string or null is specified, repeat will. be assumed |
Following is a simple example which makes use of above mentioned method to create a nice pattern.
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById('mycanvas'); // Make sure we don't execute when canvas isn't supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); // create new image object to use as pattern var img = new Image(); img.src = 'images/pattern.jpg'; img.onload = function(){ // create pattern var ptrn = ctx.createPattern(img,'repeat'); ctx.fillStyle = ptrn; ctx.fillRect(0,0,150,150); } } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body onload="drawShape();"> <canvas id="mycanvas"></canvas> </body> </html> |
Assuming we have following pattern images/pattern.jpg.
The above example would draw following result:
To learn above concept - Do Online Practice using latest version of either Safari or Opera.
HTML5 canvas provides capabilities to create nice shadows around the drawings. All drawing operations are affected by the four global shadow attributes
SN | Property and Description |
---|---|
1 | shadowColor [ = value ] This property returns the current shadow color and can be set, to change the shadow color. |
2 | shadowOffsetX [ = value ] This property returns the current shadow offset X and can be set, to change the shadow offset X. |
3 | shadowOffsetY [ = value ] This property returns the current shadow offset Y and can be set, change the shadow offset Y. |
4 | shadowBlur [ = value ] This property returns the current level of blur applied to shadows and can be set, to change the blur level. |
Following is a simple example which makes use of above mentioned attributes to draw a shadow.
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById('mycanvas'); // Make sure we don't execute when canvas isn't supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; ctx.font = "20px Times New Roman"; ctx.fillStyle = "Black"; ctx.fillText("This is shadow test", 5, 30); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body onload="drawShape();"> <canvas id="mycanvas"></canvas> </body> </html> |
The above example would produce following result:
To learn above concept - Do Online Practice using latest version of either Safari or Opera.
Copyright © tutorialspoint.com