Canvas: Difference between revisions

Revision as of 16:58, 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>

See Looping with 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>
<body onload="draw()">
<h1>Hello canvas</h1>
<canvas id="canvas" width="640" height="640" style="border: 3px dotted red"></canvas>
</body>
</html>

Links