Week7 – HTML5 & Canvas

These weeks, we talked about HTML5 and Canvas in class. Meanwhile, Viveka shows some demo for us. In fact, I am very interested in this topic. I found a website (click here). When you move the mouse, the background will be changed. When you click the mouse left button, you can see the message from twitter. Then you can click the author who post the new information on the twitter, and follow on his twitter. The website is using HTML5 and canvas, it is just for fun.

I searched and read some books and website about HTML5 and canvas. Canvas is one of the elements in HTML5. It is used to create diagram under JavaScript. Actually, using canvas to build a rectangle field, and the user can control all elements in the canvas. The following lists some important points and attributes about Canvas.

(1)Create Canvas in HTML5, set id, width and height of the Canvas:
e.g: canvas id="myCanvas" width="200" height="100"

(2)Create JavaScript
a. Due to canvas cannot create diagram, all of the drawing should under the JavaScript.
e.g: script type="text/javascript"
var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);
b.Using id to find out canvas

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

c.Create context
e.g:

var cxt=c.getContext("2d");

d. Create a red rectangle as a example
e.g:

cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);

(3) Understanding the position
As above mentioned, fillRect parameters as (0,0,150,75). That means, drawing a rectangle as 150*75 from the left top (0,0).

Canvas as a new element on HTML5, it is quite interesting. On the other hand, using canvas, we can create more and more dynamic and wonderful website easily.