Canvas: Difference between revisions
(→Links) |
|||
| (8 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
To use it, you add the canvas tag to your HTML page, then use javascript draw on it. | To use it, you add the canvas tag to your HTML page, then use javascript draw on it. | ||
<canvas id=" | <canvas id="example" showsrc> | ||
function draw() { | function draw() { | ||
c = document.getElementById(" | c = document.getElementById("example"); | ||
p = c.getContext("2d"); | p = c.getContext("2d"); | ||
p.fillRect(50, 50, 150, 150); | p.fillRect(50, 50, 150, 150); | ||
| Line 11: | Line 11: | ||
</canvas> | </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. | |||
<source lang="javascript"><!DOCTYPE html> | <source lang="javascript"><!DOCTYPE html> | ||
| Line 26: | Line 26: | ||
//console.log("c is",c) | //console.log("c is",c) | ||
p = c.getContext("2d") | p = c.getContext("2d") | ||
p.fillRect(50, 50, 150, 150); | |||
} | } | ||
</script> | </script> | ||
| Line 36: | Line 32: | ||
<!-- 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="250" height="250" style="border: 1px solid black"></canvas> | |||
<canvas id="canvas" width=" | |||
</body> | </body> | ||
</html> | </html> | ||
| Line 43: | Line 38: | ||
== Links == | == Links == | ||
* [[Looping with canvas]] | |||
* [http://developer.mozilla.org/en-US/docs/Canvas_tutorial Mozilla Tutorial] | * [http://developer.mozilla.org/en-US/docs/Canvas_tutorial Mozilla canvas Tutorial] | ||
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html The official specification] | * [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html The official canvas specification] | ||
* [http://www.effectgames.com/demos/canvascycle/ An example for color cycling with the canvas element] | * [http://www.effectgames.com/demos/canvascycle/ An example for color cycling with the canvas element] | ||
* [http://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas Pixel manipulation with canvas] | |||
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>