HTML5 Canvas / PDF

Sample of the pdf document :

What is Canvas?

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

---

Browser Suppors  

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the <canvas> element.

Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.

---

Create a Canvas

A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.

Note: By default, the <canvas> element has no border and no content.

The markup looks like this:

<canvas id="myCanvas" width="200" height="100"></canvas>

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.

Tip: You can have multiple <canvas> elements on one HTML page.

To add a border, use the style attribute:

Example

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

---

Draw Onto The Canvas With JavaScript

All drawing on the canvas must be done inside a JavaScript:

Example

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Example explained:

First, find the <canvas> element:

var c=document.getElementById("myCanvas");

Then, call its getContext.......

Click here for  Download PDF / FREE