HTML5 Canvas

<canvas> is a HTML element which can be used to draw graphics using scripting (usually JavaScript). This can, for instance, be used to draw graphs, make photo composition or simple (and not so simple) animations. 

<canvas> was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari and Google Chrome. Gecko 1.8-based browsers, such as Firefox 1.5, also support this element. This tutorial describes how to use the <canvas> element to draw 2D graphics, starting with the basics. Using the <canvas> element isn’t very difficult but you do need a basic understanding of HTML and JavaScriptThe default size of the canvas is 300px * 150px (width * height). But custom sizes can be defined using CSS height and width property. 

The basics of using canvas

Creating a canvas context on your page is as simple as adding the <canvas> element to your HTML document like so:

<canvas id="myCanvas" width="300" height="150">
Fallback content, in case the browser does not support Canvas.

You need to define an element ID so you can find the element later in your JavaScript code, and you also need to define the width and height of the canvas.

That’s your drawing pad created, so now let’s put pen to paper. To draw inside your canvas you need to use JavaScript. First you find your canvas element using getElementById, then you initialize the context you want.

 In this tutorials we’ll focus on the fundamental drawing capabilities of the HTML5 Canvas, including line and curve drawing, path drawing, shape drawing, gradients, patterns, images, and text.

HTML5 Canvas Basic Tutorials Prerequisites

All you need to get started with Basic Tutorials is a modern browser such as Google Chrome, Firefox, Safari, Opera, or IE9, a good working knowledge of JavaScript, and a simple text editor like notepad.

The HTML5 Canvas element is an HTML tag similar to the <div>,<a>, or <table> tag, with the exception that its contents are rendered with JavaScript.  In order to leverage the HTML5 Canvas, we’ll need to place the canvas tag somewhere inside the HTML document, access the canvas tag with JavaScript, create a context, and then utilize the HTML5 Canvas API to draw visualizations.

When using canvas, it’s important to understand the difference between the canvas element and the canvas context, as often times people get these confused.  The canvas element is the actual DOM node that’s embedded in the HTML page.  The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element.  The context can be 2d or webgl (3d).

Each canvas element can only have one context.  If we use the getContext() method multiple times, it will return a reference to the same context object.

What’s so Great About HTML5 Canvas?

Here are some reasons you might want to consider learning to use HTML5’s canvas feature:

  • Interactivity. Canvas is fully interactive. It can respond to a user’s actions by listening for keyboard, mouse, or touch events. So a developer is not restricted to only static graphics and images.
  • Animation. Every object drawn on the canvas can be animated. This allows for all levels of animations to be created, from simple bouncing balls to complex forward and inverse kinematics.
  • Flexibility. Developers can create just about anything using canvas. It can display lines, shapes, text, images, etc. — with or without animation. Plus, adding video and/or audio to a canvas application is also possible.
  • Browser/Platform Support. HTML5 Canvas is supported by all major browsers and can be accessed on a wide range of devices including desktops, tablets, and smart phones.
  • Popularity. Canvas popularity is rapidly and steadily growing so there is no shortage of resources available.
  • It’s a web standard. Unlike Flash and Silverlight, Canvas is open technology that’s part of HTML5. And although not all of its features are implemented in all browsers, developers can be certain canvas will be around indefinitely.
  • Develop once, run everywhere. HTML5 Canvas offers great portability. Once created, Unlike Flash and Silverlight, a canvas application can run almost anywhere — from the largest computers to the smallest mobile devices.
  • Free and accessible development tools. The basic tools for creating HTML5 canvas applications are just a browser and a good code editor. Plus, there are many great and free libraries and tools to help developers with advanced canvas development.

What Applications Can You Create with HTML5 Canvas?

OK, canvas is great. But what exactly can use it for? Let’s see.

  • Gaming. The HTML5 Canvas’ feature set is an ideal candidate for producing all sorts of 2D and 3D games.
  • Advertising. HTML5 Canvas is a great replacement for Flash-based banners and ads. It has all the needed features for attracting buyers’ attention.
  • Data Representation. HTML5 can collect data from global data sources and use it to generate visually appealing and interactive graphs and charts with the canvas element.
  • Education and Training. HTML5 canvas can be used to produce effective and attractive learning experiences, combining text, images, videos, and audio.
  • Art and Decoration. With a little bit of imagination and canvas’s wide variety of colors, gradients, patterns, transparency, shadows, and clipping features, all kinds of artistic and decorative graphics can be drawn.

Now that we know why we should learn canvas, let’s look at the basics of HTML5 Canvas and how to start using it.

Canvas Rendering Contexts

Every HTML5 canvas element must have a context. The context defines what HTML5 Canvas API you’ll be using. The 2d context is used for drawing 2D graphics and manipulating bitmap images. The 3d context is used for 3D graphics creation and manipulation. The latter is actually called WebGL and it’s based on OpenGL ES.

HTML5 Canvas Template

  <canvas id="myCanvas" width="578" height="200"></canvas>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
     // do stuff here

HTML5 Canvas Line Tutorial

 To draw a line using HTML5 Canvas, we can use the beginPath()moveTo()lineTo(), and stroke() methods.

First, we can use the beginPath() method to declare that we are about to draw a new path.  Next, we can use the moveTo() method to position the context point (i.e. drawing cursor), and then use the lineTo() method to draw a straight line from the starting position to a new position.  Finally, to make the line visible, we can apply a stroke to the line using stroke().  Unless otherwise specified, the stroke color is defaulted to black.

For Complete HTML Canvas Tutorial : Clickhere


2 thoughts on “HTML5 Canvas

  1. Pingback: HTML Canvas Tutorial | Sathya's Log

  2. Pingback: HTML5 Canvas Basics | Sathya's Log

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s