HTML5 Canvas

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 the 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 in 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.

HTML5 Canvas | Browser Compatibility

The Canvas element works in naerly 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 a 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 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, smart phones 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, Run Everywhere
  
  Unlike Flash and Silverlight a canvas element can run almost everywhere. Portability is one of the great features that are available in a 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 these 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

A canvas is a simple rectangular or square area on a 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 a markup in the HTML page for defining canvas functionality:

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

Adding Attributes

Attributes are user dependent, you can use attributes depending on you 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

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

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