Did you find this useful?
Socialize it today.


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.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

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