HTML5 Canvas

July 8, 2011

The HTML5 Canvas element is used to draw graphics using Javascript. The most useful tutorial I have found for learning about HTML5 Canvas is this:

Dive Into HTML5

Here are some results of my explorations with Canvas, learning Javascript along the way ...

Basic Elements

Create a canvas in the body of your html document like so:

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; GeSHi has a deprecated constructor in /home/margar21/public_html/geshi.php on line 259

Deprecated: Function create_function() is deprecated in /home/margar21/public_html/geshi.php on line 4716
<canvas id="MyFirstCanvas" width="400" height="400"></canvas>

To display the canvas upon loading your document, you could use the following javascript:

window.onload = function draw() {
  try {
    var canvas_1 = document.getElementById("MyFirstCanvas");
    var ctx_1 = canvas_1.getContext("2d");
    var canvas_2 = document.getElementById("MySecondCanvas");
    var ctx_2 = canvas_2.getContext("2d");
  } catch(err) {}


I used a somewhat arbitrary mathematical function to generate a 2D color gradient.

Lots of dots!

Mathematical Functions


A very twisty spiral

Last modified: