HTML5 Game - Canvas Using Patterns

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Pattern

Introduction

We can create patterns using the createPattern method.

The 2D drawing context defines support for three types of pattern:

  • image
  • video
  • canvas

Check your browser for the support of this method.

To use an image pattern, we pass an HTMLImageElement object as the first argument to the createPattern method.

The second argument is the repeat style, which must be one of the values shown in the following table.

Value Description
repeatThe image should be repeated vertically and horizontally
repeat-x The image should be repeated horizontally
repeat-y The image should be repeated vertically
no-repeat The image should not be repeated in the pattern

The following code shows how we can create and use an image pattern.

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>  
<html>  
    <head>  
        <title>Example</title>  
        <style>  
            canvas {border: thin solid black; margin: 4px}  
        </style>  
    </head>  
    <body>  
        <canvas id="canvas" width="500" height="140">  
            Your browser doesn't support the <code>canvas</code> element  
        </canvas>  
        <img id="banana" hidden src="http://java2s.com/style/download.png"/>  
        <script>  
            let ctx = document.getElementById("canvas").getContext("2d");  
            let imageElem = document.getElementById("banana");  
              /*from www  .j a v a2  s . co  m*/
            let pattern = ctx.createPattern(imageElem, "repeat");  
  
            ctx.fillStyle = pattern;  
            ctx.fillRect(0, 0, 500, 140);  
        </script>  
    </body>  
</html>

The document above contains a hidden img element.

The code uses the DOM to get the HTMLImageElement object that represents the img element.

Then uses it as the first argument to the createPattern method.

The second argument is the 'repeat' value.

It causes the image to be repeated in both directions.

Then the code sets the pattern as the value for the fillStyle property and use the fillRect method to draw a filled rectangle.

The pattern is copied from the current state of the img element.

The pattern won't change if we use JavaScript and the DOM to change the value of the src attribute value of the img element.

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
      <title>Patterns</title>

      <style>
         #canvas {//from w ww . jav  a2 s .  c  o  m
            background: #eeeeee;
            border: thin solid cornflowerblue;
         }

         #radios {
            padding: 10px;
         }
      </style>
   </head>

   <body>
      <div id='radios'>
         <input type='radio' id='repeatRadio' name='patternRadio' checked/>repeat
         <input type='radio' id='repeatXRadio' name='patternRadio'/>repeat-x
         <input type='radio' id='repeatYRadio' name='patternRadio'/>repeat-y
         <input type='radio' id='noRepeatRadio' name='patternRadio'/>no repeat
      </div>
      
       <canvas id="canvas" width="450" height="275">
        Canvas not supported
       </canvas>

      <script>


let canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    repeatRadio = document.getElementById('repeatRadio'),
    noRepeatRadio = document.getElementById('noRepeatRadio'),
    repeatXRadio = document.getElementById('repeatXRadio'),
    repeatYRadio = document.getElementById('repeatYRadio'),
    image = new Image();

function fillCanvasWithPattern(repeatString) {
   let pattern = context.createPattern(image, repeatString);
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.fillStyle = pattern;
   context.fillRect(0, 0, canvas.width, canvas.height);
   context.fill();
};

repeatRadio.onclick = function (e) {
  fillCanvasWithPattern('repeat'); 
};

repeatXRadio.onclick = function (e) {
  fillCanvasWithPattern('repeat-x'); 
};

repeatYRadio.onclick = function (e) {
  fillCanvasWithPattern('repeat-y'); 
};

noRepeatRadio.onclick = function (e) {
  fillCanvasWithPattern('no-repeat'); 
};

image.src = 'http://java2s.com/style/demo/jet.png';
image.onload = function (e) {
   fillCanvasWithPattern('repeat');
};

        
      </script>
   </body>
</html>

Related Topic