Blog Design Development Mobile Inspiration CSS Javascript News Opinions Politics Menu

Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial

HTML5 Canvas Pattern Tutorial

Description

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.

Demo