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.
