Canvas: draw circles with Javascript and Canvas (HTML5)

This lab is a very brief introduction to the Canvas element in HTML5. The idea is to just give you a sense of what it's all about. If you work with Canvas in the future, it will involve using some javascript libraries which make working with Canvas much easier.

What is Canvas?

An HTML element that lets you control pixels in the browser window with script (usually Javascript).

Not all browsers support Canvas, but things are changing fast: http://en.wikipedia.org/wiki/Canvas_element#Support

This Wikipedia page shows which browsers are currently in use: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

How does Canvas compare with SVG?

(the following was pulled verbatim from http://www.w3schools.com/html5/html5_canvas_vs_svg.asp on September 9, 2012)

SVG

SVG is a language for describing 2D graphics in XML.
SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.

Canvas

Canvas draws 2D graphics, on the fly (with a JavaScript).
Canvas is rendered pixel by pixel.
In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Comparison of Canvas and SVG

The table below shows some important differences between canvas and SVG.

Canvas	SVG
Resolution dependent No support for event handlers Poor text rendering capabilities You can save the resulting image as .png or .jpg Best suited for graphic-intensive games where many objects are redrawn frequently	Resolution independent Support for event handlers Best suited for applications with large rendering areas (Google Maps) Slow rendering if complex (anything that uses the DOM a lot will be slow) Not suited for game applications

Step 1: Create an HTML file

a. Open your favorite code editor or text editor or Dreamweaver (in the following directions, I'll assume you're using Dreamweaver, but you can easily adapt to use any editor).

b. Create a new HTML5 file called MedalsCanvas.html (the canvas element is new to HTML5 so it doesn't work in any other version of HTML). If you're usingDreamweaver, that means creating a file and choosing page type HTML, Layout <none> and Doc Type HTML5:

If you're using another editor, that means typing the following:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
</body>
</html>

Step 2: Add a Canvas element

a. In the body of the HTML (i.e. somewhere after the <body> tag and before the </body> tag), add the following line:

<canvas id="medals" width="955" height="462"></canvas>

...this is a canvas tag with an id (so it can be referenced) and width and height attributes (if you don't specify width and height, it will use the default which is 300px wide and 150px tall)

b. In the head of the HTML (i.e. somewhere after the <head> tag and before the </head> tag), add the following lines:

<style>
canvas {
border: 1px solid black;
}
</style>

...this will create a black border around the canvas element so you can see where it is on the page.

c. Save your file as Canvas.html and view it. You should see this:

canvas box

Step 3: Use javascript to draw the circles on the Canvas

a. In the head section of the HTML (perhaps just below the </style> tag, write opening and closing script tags:

<script>

</script>

b. You want the script to run after the page has loaded, so add these lines after the opening script tag:

window.onload = function() {

};

c. You need to reference the canvas element, so you'll grab it and store it in a variable. Put this line inside the function (i.e. in between the two lines you just wrote):

var myCanvas = document.getElementById("medals");

d. In Flash (ActionScript) you created a Sprite object which had properties and methods for drawing shapes and lines. It's similar in Javascript - you create an object that has properties and methods for drawing shapes and lines. It's called the getContext("2d") object. Write the following line after the "var myCanvas..." line:

var myContextObject = myCanvas.getContext("2d");

e. In Flash (ActionScript), you defined the fill color for a shape before you draw the shape itself:

ACTIONSCRIPT: myShape.graphics.beginFill(0x008800);

You do the same thing in javascript. Write the following line after the "var myContext.." line:

myContextObject.fillStyle="#4D8390";

f. ActionScript has a method for drawing elipses (graphics.drawElipse), but you can also draw elipses by drawing a series of arcs. Javascript doesn't have a method for drawing elipses, but it does have a method for drawing arcs. Write the following lines after the previous line:

myContextObject.beginPath();
myContextObject.arc(123,183,31,0,2*Math.PI);
myContextObject.fill();
//myContextObject.stroke();

The first line starts the path.

The second line defines the arc, the parameters in parenthesis are:

position in x (left-right) dimension

posiiton in y (up-down) dimension

radius

starting angle

ending angle - use "2*Math.PI" to create a circle

The third line draws the arc (and fills it with color)

The fourth, commented line is an alternative that will make it just an outline

It should look like this:

g. Now draw the Japan Circle (color: #929b62, x: 812, y: 255, r:26). Use the same context object - you don't need to create a new one.

Step 4: Use javascript to write text on the circles on the Canvas

In Flash, you created a text object and added it as a child to the Sprite. On the canvas, the circle isn't an object...just dumb pixels that have painted onto the canvas in the context object. So to create text, you just add more dumb pixels and paint them onto the canvas in the context object as well.

a. Add these 4 lines:

myContextObject.font = "12px Arial";
myContextObject.fillStyle="#fff";
myContextObject.fillText("Canada",101,185);
myContextObject.fillText("Japan",796,259);

Notice that once you set a property (like font or fill style), it applies to every relevant object you create after that...until you reset that property.

Also notice that the grid system works the same as in ActionScript (i.e. x=0,y=0 is the upper left-hand corner)

labeled circles in Canvas

FINAL PRODUCT: MedalsCanvas.html