Wrapping Your Head Around HTML5 Canvas: Part 2

In my last article, part 1 of this HTML5 Canvas endeavor, we got our feet wet and learned about some of the basic foundations using Canvas in correlation with JavaScript.

I’d like to pick up where we left off in today’s article and go further down the rabbit hole, but first let’s take a moment to highlight some of the things that you picked up in part 1.

  • We learned that there is a work around to your Canvas compatibility in Internet Explorer through the use of excanvas.js
  • You learned how to setup your canvas object
  • We created a standard filled rectangle and add a stroke to the box
  • We learned how to create paths and Bezier curves

Let’s get back into the swing of things with learning about creating gradients.


You can generate gradients via fillStyle through your context object such as linear and radial. Creating a simple gradient is, well, simple. For those of you that want to create a gradient for your website this may be easier than taking the time to use an image. Let’s dive in and take a quick look:

var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);

gradient.addColorStop(0, '#fff');
gradient.addcolorStop(1, '#000');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.width);

Take a deep breath and relax. With that under your belt you’re ready to tackle radial gradients. Oh the joy. They really aren’t much different other than the fact the createRadialGradient takes the radius after each coordinate.

var canvas = document.getElementById('myCanvas'),
     ctx = canvas.getContext ('2d'),
     gradient = ctx.createRadialGradient(canvas.width/2, canvas.height/2, 0, canvas.width/2, canvas.height/2, 150);

gradient.addColorStop(0, '#fff');
gradient.addColorStop(1, '#000');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.width);

So let’s take a moment to break down what just happened. First, under the ‘gradient’ property you created a context of ‘createRadialGradient’ and set its parameters. The center of our gradient is set in the center at ‘0’. Our gradient uses a radius of 150 radians, it also begins in the same place though, hence ‘canvas.width/2, canvas.width/2’. It helps generate a smooth looking gradient you can be proud of. You’ll need to convert your degrees to radians in order for your arcs and radii to work. Here is a snippet of JavaScript you can use to convert:

var radians = degrees * Math.PI / 180; //Math.PI equals 180 degrees

As you can probably guess the formula to pass 360 degrees you simply multiply:

var radians = degrees * Math.PI * 2;


To get started with a good pattern you’ll need a source element, then you can place the source using the createPattern method. Filling the pattern is as easy as using the result as the fillStyle. If your element in question is either an image or video, the element much must finish loading first for the source to capture properly.

Let’s get started with creating a tiled background. The segment of code will tile a source image across your defined background:

var canvas = document.getElementById('myCanvas'),
     img = document.createElement('img'),
     ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
img.onload = function() {
     ctx.fillStyle = ctx.createPattern(this, 'repeat');
     ctx.fillRect(0, 0, canvas.width, canvas.height);
img.src = 'bg_image01.jpg';

Once the ‘onload’ event fires, does the pattern continue to build. You’ll need to wait until the image finishes loading before you can use it. The ‘repeat’ string mimics the CSS syntax of ‘background-repeat’, so in saying that, it also follows the other CSS methods of ‘repeat-x’, ‘repeat-y, and ‘no-repeat’. One feature of canvas, whether you find it a blessing or curse, is that as you scale your canvas size the images that are tiled on the canvas will scale as well.


I hope you’ve been following along so far, if not go back and check out part 1 of this series. In my next article we’ll cover working with images and text. So yes, the canvas fun does not stop here! Once we cover the basics, that’s when we can start to explore the fun things, like advanced Canvas. It wouldn’t be an A to Z article if I only covered portions of Canvas.

I will, however, leave you with a good example of the use of Canvas with each new article added. See if you can spot things that you’ve learned in each article so far.

The Elements by Simon Madine

Josh is currently the Creative Director at Rappsody Studios located in Jacksonville, FL and has been working in across the web for close to eight years. He has a soft spot for front-end development and comics. More articles by Joshua Rapp
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress