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 the fillStyle 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.

new window

Code Editor

Modified on April 8th, 2013 by Eric Rowell
comments powered by Disqus