TERASIZE: Using Canvas on HTML5

One of the new and most exciting changes in HTML5 is the canvas element. Using the <canvas> allows you to draw dynamic shapes and images into your web page by using simple javascript instructions.

Getting started
The canvas element is declared like a normal HTML element, has two specific attributes (height and width) and the same global attributes as any other tag (id, name, style, etc..).
To use canvas on a web page you simply need to do this:

<canvas id="myCanvas" width="700" height="500"></canvas>

You can try it if you like but all you will see is a blank page.

Next we need to create a simple javascript to access the canvas:

<script>
  function drawMyImage() {
    canvas = document.getElementById("myCanvas"); // Get the canvas object
    canvasContext = canvas.getContext("2d"); // Get the place were the drawing will happen
    img = new Image(); // Create a image object
    img.src = "./image.png"; // Assign image.png to the object
    canvas.width = canvas.width; // This looks pointless but it actually forces canvas to refresh
    canvasContext.strokeRect(0,0,canvas.width,canvas.height); // Draw a rectangle near the canvas edges
    canvasContext.drawImage(img, 10, 10); // Draws the image to the canvas
  }
</script>

This will draw a rectangle and "image.png" into the canvas. There are many methods to work with canvas and do all sorts of cool things. Take a look at this blog.

Now let's create a button to call the javascript and we are ready to test our function:

<input type="button" onclick="drawMyImage();" value="Draw me!"/><br />

That's it! Lets put it all together. It should look something like this...

<!DOCTYPE html>
<html>
  <body>
    <input type="button" onclick="drawMyImage();" value="Draw me!"/> <br />
    <canvas id="myCanvas" width="700" height="500"></canvas>
    <script>
      function drawMyImage() {
        canvas = document.getElementById("myCanvas"); // Get the canvas object
        canvasContext = canvas.getContext("2d"); // Get the place were the drawing will happen
        img = new Image(); // Create a image object
        img.src = "./image.png"; // Assign image.png to the object
        canvas.width = canvas.width; // This looks pointless but it actually forces canvas to refresh
        canvasContext.strokeRect(0,0,canvas.width,canvas.height); // Draw a rectangle near the canvas edges
        canvasContext.drawImage(img, 10, 10); // Draws the image to the canvas
      }
    </script>
  </body>
</html>

Save this code into a file (index.html for example). Make sure that you have an image called "image.png" in the same directory of your html file. Open the file in your browser and...

If you are using Internet Explorer 9 or below you will be disappointed as your version doesn't support HTML5. All other common browsers (Firefox, Chrome, Opera, etc..) should be able to see HTML5 in action.

The source code for this demo can be found in the downloads section.

If this code doesn't seem to be working for you please leave a comment bellow.