HTML5 canvas: An Introduction

HTML5 canvas is one of the vital tools in a grahic developer working with HTML5. It helps delivering high interactivity levels and multimedia to the end user in almost unlimited variations and combinations.
It helps you to draw interactive graphics, dashboards, presentations with no limits and restrictions in the bounds of the canvas elements in HTML5 page. The HTML5 canvas has an API that we use to work with itself. It is a JavaScript API and has various functions.

What is HTML5 canvas?

The HTML5 canvas is an element described in HTML Code which helps us in drawing various raster-based images. The real magic of the HTML5 canvas element cannot be seen without the HTML5 Canvas API. This API is used by writing JavaScript and can draw single geometric 2D figures, images and animations.

What makes HTML5 canvas an amazing API?

Here are some reasons which makes HTML5 canvas so Great:

Interactivity; It is fully interactive. It doesn’t wait for user’s action and can respond by listening for keyboard or touch events. It doesn’t restrict a developer to only static graphics and images.

Animation; It can animate all the objects drawn on the canvas. This can create all levels of animations, from complex forward and inverse kinematics to simple bouncing balls.

Flexibility; It helps developer to create about anything. It can show lines, text, images, shapes, etc and can animate anything. It makes adding video and audio to a canvas possible.

Browser/Platform Support; All major browsers support HTML5 Canvas. It can be accessed on various devices ranging from desktops, tablets to smart phones.

Develop once, run everywhere; HTML5 Canvas once created can run almost anywhere-- from smallest mobile devices to largest computers, unlike Flash and Silverlight.

What applications can you create with HTML5 canvas?

No wonder HTML5 Canvas is great and now let’s see what canvas do for developers.

Gaming; The HTML5 Canvas feature can produce all sorts of 2D and 3D games.

Advertising; It is a perfect substitution for flash-based banners and ads. It includes all the required features for attracting buyer’s attention.

Education and Training. HTML5 Canvas helps us to produce powerful and attractive learning experiences, combining texts, audio, videos and images.

Art and Decoration; It can draw all types of artistic and decorative graphics. It has powerful features and wide variety of colors, patterns, shadows and gradients.

Getting Started

You should have a code editor and a browser with HTML5 canvas support. We have used Google Chrome and Sublime Text, but you can use any of your choice.

Our HTML to start will look like this:

<canvas id="exampleCanvas" width="500" height="300">

<!-- OPTION 1: leave a message here if browser doesn't support canvas -->

<p>Your browser doesn’t currently support HTML5 Canvas.

Please check caniuse.com/#feat=canvas for information on

browser support for canvas.</p>

<!-- OPTION 2: put fallback content (text, image, Flash, etc.)

if the browser doesn't support canvas -->

</canvas>

And below is our JavaScript, which is to be included at the bottom of our HTML page:

var canvas = document.getElementById('exampleCanvas'),

context = canvas.getContext('2d');

// code examples will continue here...

By default, the browser will create the canvas elements with a height of 150 pixels and a width of 300 pixels, even if these aren’t described in the HTML. You can change the size anytime by specifying the width and height, as we’ve done in the HTML.

Basic canvas examples

As mentioned, HTML5 Canvas can create many kinds of objects, including lines, shapes, curves, paths, text, etc. In the following examples you can see how these objects are actually drawn.

Drawing lines

We use four canvas API methods to draw a line:

  1. beginPath() - It instructs your device’s browser to get prepare to draw a new path.
  2. moveTo(x, y) - We use it to set the line’s starting point.
  3. lineTo(x, y) - To set the ending point and draws the line by connecting the two points
  4. stroke() - To make the line visible we use this method

Drawing rectangle

To draw a rectangle, we use two methods:

  1. fillRect(x, y, width, height) - This method is used to set the coordinates and the dimension
  2. fillStyle - It is used to set the fill color.

Drawing text

To draw text on the canvas, use fillText(string, x, y) method along with the font property to set the size, and style of the text.

Detailed tutorial may be read under this link.

Example

Example of canvas in HTML5:

 

›› go to examples ››