Learn about HTML5 Canvas with Example

Introduction

This article shows you a world of possibilities using the HTML5 Canvas element along with what you can create with it, applications domains, methods, browser compatibility, features, and a reference example.

Canvas

In the most simple words, we can define Canvas as an element to draw graphics into via scripting. This tag is nothing but a container for graphics. We need to use a script to provide the structure or shapes of the graphics.

We can have multiple canvas elements on one HTML page.
The real power of the canvas element is the scripting for which we do use JavaScript.
For the complete functionality of the HTML5 Canvas tag we require an API, this API is made by writing JavaScript code that provides access to canvas element functionality.

HTML5 Canvas | Methods

There are several methods for various functionalities, likes drawing shapes, adding images, graphics and so on in a Canvas element.

Attributes

HTML5 Canvas | Browser Compatibility

The Canvas element works in nearly every browser, but the thing is it needs to be updated. It works well with Internet Explorer 9.0+, Chrome, Opera, Firefox and Safari. Why HTML5 Canvas? | Features Here are some reasons you need to know if you really want a warm touch of the HTML5 Canvas element. These features are:

Flexibility: Designers and developers can create an entire world of possibilities through this element. It can display shapes, images, text, graphics and so on. After creating these you have still two options in your pocket, you either can go with some animation stuff or you can simply leave it blank.
Interactivity: A Canvas responds to a user's actions by listening for a mouse, keyboard or some other device event. It opens a complete range of options for developers.
Thus we can say that the Canvas element is fully user-interactive.
Multimedia options: You can add an audio or a video to a canvas application in order to make it more dynamic. It's another possibility of the HTMl5 canvas tag.
Animation: Each and every object you draw using a canvas element can be animated. This element allows all the level of animations to be created.
Platform support: The HTMl5 canvas is supported by all the major browsers and can be accessed on a wide range of devices including desktops, smartphones or tablets too.
Free and accessible dev tools: The basic tools you need for creating a canvas is only a simple browser and a text editor (for example, Notepad), nothing more than that. But in case you want to get involved in advanced works of canvas then several types of free libraries are available along with related tools to help developers.
Code once runs everywhere: Unlike Flash and Silverlight a canvas element can run almost everywhere. Portability is one of the great features that are available on canvas.

Html5 Canvas | Possibilities

Here are presenting validations regarding my article, I mentioned a few applications domains of HMTL5 canvas elements:

Gaming: (You can produce 2D or 3D games using a Canvas element.)
Advertising: (You can remove almost 70% Flash advertising work using this element.)
Art and Decoration
Graphics
Multimedia
Data Representation

HTML5 Canvas | Attributes

There are only two specific attributes of HTML5 Canvas elements:

Width
Height

In spite of this, there are several other attributes too, like name, id, class, type and so on.

<canvas id="firstCanvas" width="250" height="320"></canvas>

Creation of a canvas

Canvas is a simple rectangular or square area on an HTML page that is specified with the <canvas> element. By default it is blank or we can say it doesn't have any specific content until or unless we declare any attribute with it or in it. There are 2 simple steps in creating a canvas.

Defining Markup
Adding attributes (depends on you)

Defining Markup This tag line is used as markup in the HTML page for defining canvas functionality:

Adding Attributes Attributes are user-dependent, you can use attributes depending on your preference or your requirements.

For example

<canvas id="firstCanvas" width="250" height="320" style="border:1px solid #993300;"></canvas>

Canvas with JavaScript

We can only define the functioning part from the canvas element but for graphics, shapes or any other work, we need to enable scripting with it. In general, we do use JavaScript.

For example

<canvas id="firstCanvas" width="250" height="320" style="border:1px solid #993300;"></canvas>
<script>
  var v = document.getElementById("firstCanvas");
  var ctx = v.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 320, 250);
</script>

Outcome

Outcomes

Reference Example

<html>
   <head>
      <title> HTML5 Canvas</title>
   </head>
   <body>
      <h2> Graphics | Image</h2>
      <img id="" src="" alt="" width="250" height="320" />
      <p> Canvas: </p>
      <canvas id="firstCanvas" width="250" height="320" style="border:1px solid #000000;">
         <!-- your text will be here-->
      </canvas>
      <script>
         var v = document.getElementById("firstCanvas");
         var ctx = v.getContext("2d");
         var img = document.getElementById("Dexter");
         ctx.drawImage(img,10,10);
      </script>
   </body>
</html>

Outcome

Graphics

I hope you will like that. For more stuff of HTML5 keep visiting.