HTML5 Canvas Fill Styles

Friday, October 26, 2012

When drawing onto the HTML5 Canvas, it is fairly common to fill the objects that are rendered with color or patterns. When filling the canvas lines or shapes with color, we can either apply a solid color, or linear gradient, radial gradient, or pattern. In this tutorial, we will look at examples of each. In the next four examples, we will draw a rectangle onto the HTML5 Canvas element and show examples for each type of fill.

Solid Color

Filling a shape with a solid color is the easiest method. We can use fillStyle property and fill() method.

context.fillStyle = '#FFAA00';
    context.fill();



<canvas id="myCanvas" width="500" height="250">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle = '#FFAA00';
    context.fill();
    </script>



Your browser does not support the HTML5 canvas tag.



Linear Gradient

To create a linear gradient onto the HTML5 Canvas, we can use the createLinearGradient() method. Linear gradients are defined by creating boundaries in the direction of the gradient, and filling with color using the addColorStop property. The direction of the linear gradient moves from the starting point to the ending point of the imaginary boundary defined with createLinearGradient() method. In this example, we will use two color stops. Color stops are placed along the boundaries between 0 and 1, where 0 is at the starting point, and 1 is at the ending point.

var gradient = context.createLinearGradient(startX, startY, endX, endY);
gradient.addColorStop(offset, color);



<canvas id="myCanvas" width="500" height="250">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.rect(0, 0, canvas.width, canvas.height);
    var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
    gradient.addColorStop(0, '#FFAA00');   
    gradient.addColorStop(1, '#FFFF00');
    context.fillStyle = gradient;
    context.fill();
    </script>



Your browser does not support the HTML5 canvas tag.



Radial Gradient

To create a radial gradient with HTML5 Canvas, we can use the createRadialGradient() method. Radial gradients are defined using two imaginary circles (starting circle and an ending circle). The gradient begins with the start circle and moves towards the ending circle.

var gradient = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
gradient.addColorStop(offset, color);



<canvas id="myCanvas" width="500" height="250">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.rect(0, 0, canvas.width, canvas.height);
    var gradient = context.createRadialGradient(250, 125, 20, 250, 125, 200);
    gradient.addColorStop(0, '#FFFF00');
    gradient.addColorStop(1, '#FFAA00');
    context.fillStyle = gradient;
    context.fill();
    </script>



Your browser does not support the HTML5 canvas tag.



Pattern Fill

To create a pattern onto 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.

var pattern = context.createPattern(imageObj, repeatOption);
context.fillStyle = pattern;
context.fill();



<canvas id="myCanvas" width="500" height="250">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.rect(0, 0, canvas.width, canvas.height);
     var imageObj = new Image();
    imageObj.onload = function () {
        var pattern = context.createPattern(imageObj, 'repeat');
        context.rect(0, 0, canvas.width, canvas.height);
        context.fillStyle = pattern;
        context.fill();
    };
    imageObj.src = 'bricks.jpg';
    </script>


bricks

In this example, we are going to use an image representing bricks. This sample image's dimensions are 256px (width) x 256px (height). However, the canvas dimensions are 500px x 250px. The pattern is configured to repeat horizontally and vertically.


Your browser does not support the HTML5 canvas tag.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

HTML5: The Missing Manual HTML CSS and JavaScript Murachs HTML5 and CSS3