Canvas: Difference between revisions

Latest revision as of 09:36, 30 September 2014

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="example" showsrc> function draw() {

 c = document.getElementById("example");
 p = c.getContext("2d");
 p.fillRect(50, 50, 150, 150);

} </canvas>

Template

A complete HTML page with canvas tag + javascript to draw in it, note how the draw function is first defined (in the script tag) and then finally called by the body "onload". This ensures that the page is fully loaded before the drawing is performed.

<!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")
  p.fillRect(50, 50, 150, 150);
}
</script>
</head>
<!-- The body tag then will call draw() when the page has loaded -->
<body onload="draw()">
<canvas id="canvas" width="250" height="250" style="border: 1px solid black"></canvas>
</body>
</html>

Links

@@ Line 1: / Line 1: @@
 The [[wikipedia:Canvas element|canvas]] tag was introduced by Apple and has been [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html standardized to become part of HTML5].
-[http://pzwart3.wdka.hro.nl/~mmurtaugh/canvas.html A simple example page...]
+To use it, you add the canvas tag to your HTML page, then use javascript draw on it.
-[http://www.effectgames.com/demos/canvascycle/ An example for color cycling with the canvas element]
+<canvas id="example" showsrc>
+function draw() {
-Get the canvas tag:
+  c = document.getElementById("example");
+  p = c.getContext("2d");
- c=document.getElementById("c")
+  p.fillRect(50, 50, 150, 150);
+}
-Get the "context" (like a paper):
+</canvas>
- p=c.getContext("2d");
-Draw something!
+== Template ==
- p.fillRect(0, 0, 100, 100);
+A complete HTML page with canvas tag + javascript to draw in it, note how the draw function is first defined (in the script tag) and then finally called by the body "onload". This ensures that the page is fully loaded before the drawing is performed.
-== Examples ==
-Here is a complete HTML page with a working canvas:
 <source lang="javascript"><!DOCTYPE html>
@@ Line 26: / Line 20: @@
 <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
+   p.fillRect(50, 50, 150, 150);
-  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()">
-<h1>Hello canvas</h1>
+<canvas id="canvas" width="250" height="250" style="border: 1px solid black"></canvas>
-<canvas id="canvas" width="640" height="640" style="border: 3px dotted red"></canvas>
 </body>
 </html>
 </source>
-Here's the output:
+== Links ==
+* [[Looping with canvas]]
-<canvas id="c1" width="300" height="300">
+* [http://developer.mozilla.org/en-US/docs/Canvas_tutorial Mozilla canvas Tutorial]
-function draw(){
+* [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html The official canvas specification]
-  c = document.getElementById("c1")
+* [http://www.effectgames.com/demos/canvascycle/ An example for color cycling with the canvas element]
-  //console.log("c is",c)
+* [http://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas Pixel manipulation with canvas]
-  p = c.getContext("2d")
-  x = 10
-  while (x<300) {
-    p.strokeRect(x,100,20,40)
-    x+=60
-  }
-}
-</canvas>
-Variation: When the loop reaches the end of page it breaks the line.
-It redefines the "x" value to the begin of the line and adds 40px to "y".
-<canvas id="c2" width="300" height="300" showsrc="true">
-function draw(){
-		c = document.getElementById("c2");
-		p = c.getContext("2d");
-		hands = 1;
-		x = 20;
-		y = 200;
-		while (hands < 100) {
-			console.log(hands);
-			p.strokeRect(x,y,20,20);
-			x = x + 50;
-			hands++;
-			if (x > 600) {
-				x = 20;
-				y = y + 40;
-			}
-		}
-	}
-</canvas>
-== Tutorials & Reference ==
-* http://developer.mozilla.org/en-US/docs/Canvas_tutorial
-* http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html