Muhammad Muddassir Khanani: HTML5 Canvas Pattern Tutorial

Sunday 30 June 2013

HTML5 Canvas Pattern Tutorial

To create a pattern with the HTML5 Canvas, we can use the createPattern() method of the canvas context which returns a pattern object, set thefillStyle property to the pattern object, and then fill the shape using fill(). The createPattern() method requires an image object and a repeat option, which can be repeat, repeat-x, repeat-y, or no-repeat. Unless otherwise specified, the repeat option is defaulted to repeat.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
 
      var imageObj = new Image();
      imageObj.onload = function() {
        var pattern = context.createPattern(imageObj, 'repeat');
 
        context.rect(0, 0, canvas.width, canvas.height);
        context.fillStyle = pattern;
        context.fill();
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png';
    </script>
  </body>
</html>

Muhammad Muddassir Khanani

Pages

Sunday 30 June 2013

HTML5 Canvas Pattern Tutorial

Code Editor

No comments:

Post a Comment