Canvas is a new HTML element that can perform many neat graphical tricks such as render images from scratch, play animations, or even serve as the basis for a 2D adventure game. Canvas is initiated with the <canvas> tag and is supported by newer versions of Firefox, Opera, Safari, Chrome, and in Internet Explorer 9.

Before you begin using <canvas> be sure you have a basic understanding on JavaScript. I would consider my understanding to be towards the basic side, so if you see any places for code improvement, please let me know.

Lets begin by drawing something very simple.

    <canvas id="bluesquare” height=”200” width="200">Blue Square</canvas>
(function ($) {
  $(document).ready(function() {
      var square = document.getElementById('bluesquare');
      if(square.getContext) {
        var context = square.getContext("2d");
        context.fillStyle = "rgb(0,0,255)";
        context.fillRect (0, 0, 175, 175);
      }
  });
}(jQuery));
Blue Square

If your browser supports canvas, you should see a blue square. If not, you will see the text "Blue Square".

Code Explained:

The HTML: Canvas does not require a </canvas> after, but if you want to be more cross browser compatible you should use it. Anything between the two canvas tags will be shown to the user if their browser doesn't support HTML5. We can thank Mozilla in the creation of the tag. You could also use <canvas> like the <img /> tag, but if the user's browser is not compatible with HTML 5, then they will not see anything to indicate that something was there.

The JavaScript: The canvas is automatically loaded upon page load. It will look for the ID "bluesquare" and apply the needed changes. We are choosing to use a 2D context with .getContext. The fillStyle will allow you to choose what color you would like the shape to be and fillRect tells the canvas that it will be a rectangle and the coordinates within the canvas will be 0, 0, 175, 175 (x-coordinate, y-coordinate, length, width).


Now that is something that is easy to do in HTML, so lets try something that is a bit harder. We will draw 4 squares with multiple transparencies. Lets begin with the canvas again and then add the JavaScript.

  <canvas id="multisquare” height=”200” width="200">Multiple Squares</canvas>
var multi = document.getElementById('multisquare');
      if(multi.getContext) {
        var context = multi.getContext("2d");
 
        context.fillStyle = "rgb(0,0,255)";
        context.fillRect (0, 0, 175, 175);
 
        context.fillStyle = "rgba(200,0,0, 0.5)";
        context.fillRect (125, 35, 60, 155);
 
        context.fillStyle = "rgba(0,200,0, 0.7)";
        context.fillRect (140, 140, 200, 200);
 
        context.fillStyle = "rgba(255,255,255, 0.5)";
        context.fillRect (10, 10, 150, 50);
      }
Multiple Squares

The code isn't much different here. This time I am adding 4 shapes. I am calling the function rgba on the last three because I want transparency. I us fillRect to select the location and I am done. Much easier than doing this in HTML and CSS right? More to come!

Tags