Canvas: Difference between revisions
| Line 36: | Line 36: | ||
<!-- The body tag then will call draw() when the page has loaded --> | <!-- The body tag then will call draw() when the page has loaded --> | ||
<body onload="draw()"> | <body onload="draw()"> | ||
<canvas id="canvas" width="640" height="640" style="border: 3px dotted red"></canvas> | <canvas id="canvas" width="640" height="640" style="border: 3px dotted red"></canvas> | ||
</body> | </body> | ||
Revision as of 15:59, 25 September 2012
The canvas tag was introduced by Apple and has been standardized to become part of HTML5.
To use it, you add the canvas tag to your HTML page, then use javascript draw on it.
<canvas id="canvas" showsrc> function draw() {
c = document.getElementById("canvas");
p = c.getContext("2d");
p.fillRect(50, 50, 150, 150);
} </canvas>
Template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
// Define a draw function that contains your
// drawing code
function draw(){
c = document.getElementById("canvas")
//console.log("c is",c)
p = c.getContext("2d")
x = 10
while (x<300) {
p.strokeRect(x,100,20,40)
x+=60
}
}
</script>
</head>
<!-- The body tag then will call draw() when the page has loaded -->
<body onload="draw()">
<canvas id="canvas" width="640" height="640" style="border: 3px dotted red"></canvas>
</body>
</html>