Canvas Element Pattern: HTML5

Today lets learn how to create pattern from another canvas element.

In this video tutorial, we take 2 canvas elements. Draw a small circle on one canvas and use it as pattern and draw a bigger circle on the main canvas.

HTML file
index.html

< !DOCTYPE HTML>








 
 
 
  

Here we have 2 canvas elements with unique ids. First/Main canvas is 400px X 400px width and height, second canvas is 50px X 50px width and height.
Related: Canvas Basics: HTML5

CSS file
myStyle.css

canvas {
 border: 2px dotted black;
}

We assign 2px black dotted border to both the canvas present on our HTML page.

JavaScript file: Pattern Code
myScript.js

  var pCanvas          = document.getElementById("pattern"); 
  var pContext         = pCanvas.getContext("2d");
  
  pContext.lineWidth   = 2;
  pContext.arc(25, 25, 10, 0, 2 * Math.PI);
  pContext.strokeStyle = "red";
  pContext.fillStyle   = "blue";
  pContext.stroke();
  pContext.fill();

Here we get the pattern id and extract the 2d context APIs. Using pContext object, we draw a small circle of radius 10px with red border and filled with blue color.
Related: Draw Arcs/Circle with Canvas: HTML5

JavaScript file: Main Canvas Code
myScript.js

  context.fillStyle    = context.createPattern(pCanvas, "repeat");
  context.strokeStyle  = "pink";
  context.arc(200, 200, 100, 0, 2 * Math.PI);
  context.stroke();
  context.fill();

We assign previously created pattern to fillStyle of our main canvas context. With this pattern as fillStyle, and a pink border, we draw a circle which has a radius of 100px.
Related: Canvas Image Patterns: HTML5

JavaScript file: Full Code
myScript.js

window.onload = canvas;

function canvas()
{
 var myCanvas = document.getElementById("myCanvas");
 
 if( myCanvas && myCanvas.getContext("2d") ) 
 {
  var context            = myCanvas.getContext("2d");
  
  var pCanvas            = document.getElementById("pattern"); 
  var pContext           = pCanvas.getContext("2d");
  
  pContext.lineWidth     = 2;
  pContext.arc(25, 25, 10, 0, 2 * Math.PI);
  pContext.strokeStyle   = "red";
  pContext.fillStyle     = "blue";
  pContext.stroke();
  pContext.fill();
  
  context.shadowColor    = "black";
  //context.shadowOffsetX= - 10;
  //context.shadowOffsetY= - 10;
  context.shadowBlur     = 10;
  
  context.fillStyle      = context.createPattern(pCanvas, "repeat");
  context.strokeStyle    = "pink";
  context.arc(200, 200, 100, 0, 2 * Math.PI);
  context.stroke();
  context.fill();
 }
}

We’re making the main canvas circle stand out by applying shadow effects.
Related: Shadow Effect on Canvas: HTML5

Canvas Element Pattern: HTML5

Patterns can be used creatively in HTML5 games development and to draw images which look like having a 2d or 3d dimensions.