HTML5 Canvas Shape Fill Tutorial

To fill an HTML5 Canvas shape with a solid color, we can set the fillStyle property to a color string such as blue, a hex value such as #0000FF, or an RGB value such as rgb(0,0,255), and then we can use the fill() method to fill the shape.  Unless otherwise specified, the default fill style for an HTML5 Canvas shape is black.

Note: When setting both the fill and stroke for a shape, make sure that you use fill() before stroke(). Otherwise, the fill will overlap half of the stroke.

new window

Code Editor

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