HTML 5.0 - Canvas

Add a canvas element to the HTML5 page.

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

<canvas style="border:1px solid #C0C0C0" width="200" height="100">
Your browser does not support a canvas
</canvas>

Canvas Preview:

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

JavaScript uses the id to find the canvas element:

Then, create a context object:

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:

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

Drawing in Canvas Preview

The fillRect method above had the parameters (0,0,150,75).

This means: Draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0).

The canvas' X and Y coordinates are used to position drawings on the canvas.

Mouse over the rectangle below to see the coordinates:

• Web Tutorial
• HTML Tutorials
• XHTML Tutorials
• HTML 5.0 Tutorials
• CSS Tutorials
• CSS3 Tutorials
• Browser Scripting
• Javascript Tutorials
• HTML DOM Tutorials
• DHTML Tutorials
• AJAX Tutorials
• Server Scripting
• PHP Tutorials
• Database
• MySQL Tutorials
• XML Tutorial
• XML Tutorials