What is Canvas?

The HTML5 canvas element uses JavaScript to draw graphics on a web page.

A canvas is a rectangular area, and you control every pixel of it.

The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.

---

Create a Canvas Element

Add a canvas element to the HTML5 page.

Specify the id, width, and height of the element:

<canvas id=”myCanvas” width=”200″ height=”100″></canvas>

 

Draw With JavaScript

The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript:

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

 

JavaScript uses the id to find the canvas element:

var c=document.getElementById(“myCanvas”;

 

Then, create a context object:

var cxt=c.getContext(“2d”;

 

The getContext(“2d” object is a built-in HTML5 object, with many methods to draw paths, boxes, circles, characters, images and more.

The next two lines draws a red rectangle:

cxt.fillStyle=”#FF0000″;
cxt.fillRect(0,0,150,75);

 

The fillStyle method makes it red, and the fillRect method specifies the shape, position, and size.

Tagged with: canvas • html • html5
 

This entry was posted on Friday, July 16th, 2010 at 10:00 AM and is filed under canvas, html5, web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.