Logo
  Sunday, May 20, 2012
Sign-In  |  Sign-Up  |  Contact Us  | Bookmark |  RSS Feed

HTML5 Tutorial FeedBurner

Using HTML5 Canvas  
HTML5 canvas element creates rectangular area on your HTML5 webpage. It is defaulted at 350 by 150 pixels which can be reset to your own specifications. It is normally added to the page with the help of the following tag

<canvas></canvas>

HTML5 allows you to manipulate this canvas element via JavaScript in many different ways which makes canvas very flexible in what you can do with them. For example, you can insert images, text or drawings into canvas.

Once you have added a canvas element to your page, you can use JavaScript to manipulate it any way you want. You can add graphics, lines, and text to it; you can draw on it; and you can even add advanced animations to it.

The HTML5 canvas provides support for two dimensional operations. It is big improvement over what could have been done in the past with images and CSS.

In order to start using canvas you need to get its context first. You can then call and apply actions to this context. These actions are somewhat similar to creating a transaction. You need to do action first and then there is a commit phase at the end of the action.

Print Using HTML5 Canvas Bookmark Using HTML5 Canvas

Related Articles  
HTML5 canvas browser compatibility
HTML5 is not official and mandated version of HTML and not every browser vendor supports it. You need to be aware of ...
HTML5 canvas transformation
Canvas transformation is generally used to set up comprehensive canvas. It can be overkill if you want to create simple ...
Adding and drawing on canvas in HTML5
You can add canvas to your HTML5 page with the help of HTML5 tag called canvas.
Working with underlying pixels in the HTML5 canvas
HTML5 developer can gain access to individual pixel in the canvas. The way it is accomplished is via a numerical array.
HTML5 Background Patterns
Images can be used throughout web application, but sometimes it is useful to set images as backgrounds.
HTML5 Canvas Transforms context.rotate(x) function
HTML5 provides several transform operations: scale, translate, rotate and others. Let’s look at the context.rotate(x) ...
More