HTML5 Canvas - Pattern and Shadow


Advertisements


Create Pattern

There is following method required to create a pattern on the canvas:

SNMethod 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

Example

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.

Pattern

The above example would draw following result:

Canvas Pattern

To learn above concept - Do Online Practice using latest version of either Safari or Opera.

Create Shadows

HTML5 canvas provides capabilities to create nice shadows around the drawings. All drawing operations are affected by the four global shadow attributes.

SNProperty 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.

Example

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:

Canvas Shadow

To learn above concept - Do Online Practice using latest version of either Safari or Opera.


html5_canvas.htm