their Web browsers.
The element has been standardized and included in the HTML5 specification, along with a series of 2D drawing APIs that can be used to create
- shapes,
- text,
- transitions,
- and animations inside the element.
Many believe that the <canvas> element is one of the most important aspects of HTML5 as it:
- facilitates the production of graphs,
- interactive games,
- paint
- applications,
- and other graphics on the fly without requiring external plug-ins such as Adobe Flash.
The <canvas> element itself is:
- quite basic,
- defining the width,
- height,
- and unique ID for the object.
The developer must then use a series of JavaScript APIs to actually draw objects on the canvas, typically when the Web page has finished rendering.
These APIs allow the developer to:
- draw shapes and lines;
- apply color, opacity, and gradients;
- create text;
- transform canvas objects;
- and perform animation.
The APIs also allow the <canvas> to be interactive and respond to user input such as:
- mouse
- events and key events,
- facilitating the production of games and Web applications on the canvas.
You will see an example of the <canvas> element in action in the sample HTML5/CSS3 Web site later in this tutorial.
The <canvas> element was originally developed by Apple for use in Mac OS X Dashboard widgets and in Safari, but was later adopted by Mozilla and Opera in
their Web browsers.
The element has been standardized and included in the HTML5 specification, along with a series of 2D drawing APIs that can be used to create
- shapes,
- text,
- transitions,
- and animations inside the element.
Many believe that the <canvas> element is one of the most important aspects of HTML5 as it:
- facilitates the production of graphs,
- interactive games,
- paint
- applications,
- and other graphics on the fly without requiring external plug-ins such as Adobe Flash.
The <canvas> element itself is:
- quite basic,
- defining the width,
- height,
- and unique ID for the object.
The developer must then use a series of JavaScript APIs to actually draw objects on the canvas, typically when the Web page has finished rendering.
These APIs allow the developer to:
- draw shapes and lines;
- apply color, opacity, and gradients;
- create text;
- transform canvas objects;
- and perform animation.
The APIs also allow the <canvas> to be interactive and respond to user input such as:
- mouse
- events and key events,
- facilitating the production of games and Web applications on the canvas.
You will see an example of the <canvas> element in action in the sample HTML5/CSS3 Web site later in this tutorial.