HTML5 Canvas Tag - A Must-Know For DevelopersPosted on 20 Feb by

HTML5 Canvas Tag - A Must-Know For Developers

Canvas tags are an integral part of HTML5 coding. Canvas allows the user to draw different raster-based images like geometric 2D figures, load images & media and even provides the option to bring in animations.

However, to make the maximum use of a Canvas tags, one must have expertise in coding, using JavaScript. Here’s how you can draw using canvas:

Use the <canvas></canvas> tag to create an element. By default, the canvas will have 300 pixels in width and 150 pixels in height. You could change this by modifying the tag and specifying your requirements. For example, <canvas height="100"width="200"></canvas>

To create a border using Canvas, one could make use of CSS. The below example can be used as a reference:
<style>
      canvas { border:1px solid #333; }
</style>


Canvas

In order to make this work using JavaScript, the user must create an ID. Once that is done, you’ll be able to keep it as a reference.
<canvas height="100"width="200"id="demoCanvas"></canvas>

Inserting the canvas ID into a variable:
<script type="text/javascript">
       var canvasID = document.getElementById("demoCanvas");
</script>

Changing the Canvas to 2D or 3D:
Use the var canvas = canvas.getContext("2d"); to create a canvas according to your need. Once you get a reference to your Canvas, insert a concept, and you are ready to being drawing.

How can you achieve a few basic shapes using Canvas?
Refer to the tags below to create a few basic shapes:
Draw a Line:
var c = document.getElementById("lineCanvas");
var ctx = c.getContext("2d");
ctx.moveTo (0,0);
ctx.lineTo (100,100);
ctx.stroke ();


Canvas

Text with Stroke:
var c = document.getElementById("strokeCanvas");
var ctx = c.getContext("2d");
ctx.font "25px arial";
ctx.strokeText ("Canvas",10,30);

Canvas

Loading images:
var myImage = new Image();
myImage .src = "logo.jpg";
myImage .onload function() { context.drawImage(myImage, 30, 15, 130, 110); }


Canvas

A Canvas element could also be used to draw gradients and shadows to scale, rotate and transform the shapes created. One may be curious as to what is so special about Canvas in the age of ActionScript and Flash technology?

Here are a few good reasons for using Canvas:

  • One of the most important reasons is that Canvas, as part of the HTML5 platform is totally free. Users don’t have to spend money on expensive software like ‘Adobe Flash’ to start coding. Canvas provides a great opportunity for developers to learn new things as it is visible in the core source of a site developed using HTML5.
  • Using Canvas, the user could simply start coding and watch the result being displayed in the browser. There is no requirement for any plug-in to be installed first like the Adobe Flash Player.
  • Today’s technology enables a browser to transfer graphic intensive tasks to a GPU for immediate processing instead of overworking the CPU. This gives the user great performance gains while using Canvas.

Advantages of using Canvas:

The advantages of using Canvas elements are manifold. Some of the important ones include the ability for elements to work on any HTML5 web browser. Being part of the HTML5 platform, it is easy to create bitmap graphics and vectors on screen. Canvas has the ability to render images and it doesn’t require parsing of JavaScript. Canvas is text based and can be read by all search engines, thereby creating an impact on SEO as well. Canvas provides cross-platform functionality as it works on both Android and iOS devices as well.

Disadvantages of using Canvas:

The disadvantages of using Canvas is that it is no longer supported by versions prior to IE9. If the JavaScript option is disabled in the browser, then the Canvas will draw-up a blank. Also, there is no option to click individual items; only the entire element can be chosen.

Conclusion:

Canvas is one of the most sought after features in HTML5. In sync with JavaScript, Canvas elements provide a huge variety of shapes and forms. It is a very powerful tool, especially for young developers as it is an open source platform and there is no investment required. It has the ability to turbocharge boring forms to rich, gorgeous animations.

This resource was published by
20 February 2017

POST YOUR COMMENT

Leave a Reply

Your email address will not be published. Required fields are marked *