HTML5 Canvas - HTML 5

What is Canvas in HTML5?

HTML5 element <canvas> provides an easy and powerful way to draw graphics using JavaScript. Canvas can be used to draw graphs, make photo compositions or to do simple animations.

Below is a simple <canvas> element which has only two specific attributes width and height plus all the core HTML5 attributes like id, name and class etc.

<canvas id="mycanvas" width="100" height="100"></canvas>

User can easily find that <canvas> element in the DOM using getElementById() method as shown below

var canvas = document.getElementById("mycanvas");

Below is a simple example of using <canvas> element in HTML5 document.

Output

Rendering Context

The <canvas> is initially blank but a script first has to access the rendering context and draw on it, to display something.

The canvas element has a DOM method called getContext, which is used to obtain the rendering context and its drawing functions. This function takes one parameter, the type of context 2d.

Below is the code to get required context along with a check if the browser supports <canvas> element

Browser Support

HTML5 Canvas is supported by all the latest versions of Firefox, Safari, Chrome and Opera but IE8 does not support canvas natively.

ExplorerCanvas can be used to have canvas support through Internet Explorer and for this, user just needs to include this javascript as shown below:

<!--[if IE]><script src="excanvas.js"></script><![endif]-->

HTML5 Canvas Examples

Examples

Description

Drawing Rectangles

Drawing Rectangles is used to draw rectangle using HTML5 <canvas> element

Drawing Paths

Drawing Paths is used to make shapes using paths in HTML5 <canvas> element

Drawing Lines

Drawing Lines is used to draw lines using HTML5 <canvas> element

Drawing Bezier

Drawing Bezier is used to draw Bezier curve using HTML5 <canvas> element

Drawing Quadratic

Drawing Quadratic is used to draw quadratic curve using HTML5 <canvas> element

Using Images

Using Images is used to use images with HTML5 <canvas> element

Create Gradients

Create Gradients is used to create gradients using HTML5 <canvas> element

Styles and Colors

Styles and Colors is used to apply styles and colors using HTML5 <canvas> element

Text and Fonts

Text and Fonts is used to draw amazing text using different fonts and their size.

Pattern and Shadow

Pattern and Shadow is used to draw different patterns and drop shadows.

Canvas States

Canvas States is used to save and restore canvas states while doing complex drawings on a canvas.

Canvas Translation

Canvas Translation method is used to move the canvas and its origin to a different point in the grid.

Canvas Rotation

Canvas Rotation method is used to rotate the canvas around the current origin.

Canvas Scaling

Canvas Scaling method is used to increase or decrease the units in a canvas grid.

Canvas Transform

Canvas Transform method allows modifications directly to the transformation matrix.

Canvas Composition

Canvas Composition method is used to mask off certain areas or clear sections from the canvas.

Canvas Animation

Canvas Animation is used to create basic animation using HTML5 canvas and Javascript.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 5 Topics