HTML 5 Canvas Basic syntax

This article is translated from: Http://dev.opera.com/articles/view/html-5-canvas-the-basics

Briefly

The HTML 5 specification introduces many new features, one of the most anticipated of which is the canvas element. HTML 5 Canvas provides a way to draw graphics through JavaScript, which is easy to use but powerful. Each canvas element has a context (imagine a page on the drawing board) in which you can draw any shape. Browsers support multiple canvas contexts and provide graphical rendering capabilities through different APIs.

Most browsers support the 2D canvas context-including Opera, Firefox, Konqueror, and Safari. And some versions of Opera also support the 3D canvas, Firefox can also support the form of a plug-in 3D canvas:

Download support for 3D canvas, HTML video and File I/O to Opera

The article about Opera 3D Canvas context

About Firefox 3D Canvas
Context of the article

This article introduces 2D canvas
Basics and how to use basic canvas functions such as lines, shapes, images, and text. To understand this article, you'd better understand JavaScript basics.

Click here to download the sample code in bulk

Canvas Foundation

The way to create canvas is simply to add <canvas> elements to the HTML page:

<canvas id= "MyCanvas" width= "height=" >
fallback content, in box browser does not support canvas.
  </canvas>

To be able to reference elements in JavaScript, it is best to set an ID on the element, and also to set the height and width of the canvas.

After creating the canvas, let's prepare the brush. You need to use JavaScript to draw graphics in the canvas. First find canvas by getElementById function
Element, and then initializes the context. You can then use the context API to draw various shapes. The following script draws a rectangle in the canvas (click here to see the effect):

Get a reference to the element.
var elem = document.getElementById (' MyCanvas ');

Always check for properties and methods, to make sure your the code doesn ' t break//In the other 
browsers.
if (Elem && elem.getcontext) {
  //Get the 2d context.
  Remember:you can only initialize one context per element.
  var context = Elem.getcontext (' 2d ');
  if (context) {
    //are done! Now you can draw your the rectangle.
    You are only need to provide the (x,y) coordinates, followed by the width and 
    //height dimensions.
    Context.fillrect (0, 0,);
  }

You can place the above code in the Head section of the document, or in an external file.

2d Context API

After describing how to create a canvas, let's take a look at the 2D canvas API to see what you can do with these functions.