Web | This Site

HTML-5 Tutorial
HTML5 Tag Reference
HTML5 Useful References
HTML5 Tools
HTML5 Resources
Selected Reading
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# HTML5 Canvas - Pattern and Shadow

# Create Pattern:

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

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

The above example would draw following result:

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

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.

# 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:

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

Advertisement

Online Image Processing

Indian Baby Names