Copyright © tutorialspoint.com

HTML5 Canvas - Pattern and Shadow

previous next


Advertisements

Create Pattern:

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

SNMethod and Description
1createPattern(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
1shadowColor [ = value ]
This property returns the current shadow color and can be set, to change the shadow color.
2shadowOffsetX [ = value ]
This property returns the current shadow offset X and can be set, to change the shadow offset X.
3shadowOffsetY [ = value ]
This property returns the current shadow offset Y and can be set, change the shadow offset Y.
4shadowBlur [ = 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.


previous next

Copyright © tutorialspoint.com