Plunge into HTML5 Canvas – Let’s begin

Plunge into HTML5 Canvas – Let’s begin

• 1.
  Plunge into HTML5Canvas – Let’s begin Before the arrival of HTML5 Canvas API it’s always a tough task to build complex graphs and 2D/3D designs in the website. Developers could only use drawing APIs all the way through plug-ins like SVG (Scalable Vector Graphics) and VML (vector Markup Language) with some specific web browsers like Internet Explorer. For example, to draw a simple diagonal line without a canvas element is easy, but it’s a quite difficult task if you don’t have a simple 2D drawing API at your clearance. Canvas is just providing that, and that’s why it’s exceptionally useful feature to have in the browser. What is Canvas? The Concept of Canvas is at first developed by APPLE to be used in Mac OS X WebKit to create dashboard widgets. In 2012, first draft of HTML5 is published as a working draft for the candidate recommendation and Canvas (2D and 3D) is the part of the HTML5 specification. HTML5 Canvas is providing a plug-ins free paradigm for browser. It provides native support for many features which is only possible with 3rd party plug-ins or JavaScript Hacks.
• 2.
  In 2012, firstdraft of HTML5 is published as a working draft for the candidate recommendation and Canvas (2D and 3D) is the part of the HTML5 specification. HTML5 Canvas is providing a plug-ins free paradigm for browser. It provides native support for many features which is only possible with 3rd party plug-ins or JavaScript Hacks. Getting Started with HTML5 Canvas When a canvas tag is added into the web page either statically or dynamically, it creates a rectangular area in the page or by default rectangular area is 150 pixels high and 300 pixels wide. User can create custom size of canvas by providing specific size. Unlike SVG, which is vector base, canvas is pixel based. Canvas Element 1<canvas id=”canvas1”></canvas> After adding canvas element in your webpage you can manipulate its base on requirement using JavaScript. User can add lines, graphics, charts, animated text within it. If you are working with canvas dynamically/programmatically, then you have to first get its context and perform some actions on context and finally apply those actions on the context. Following lines of code required to get context of the canvas using the help of standard document.getElementById Tag. 1 2 3 4 5 <script type="text/javascript"> windows.onload=function() { var canvas = document.getElementById('canvas1'); var context = canvas=getContext("2d");}; </script> If you are using JQuery then your code is like this, 1 2 3 4 5 <script type="text/javascript"> $(document).ready(function () { var canvas = $('#canvas1'); var context = canvas[0].getContext("2d"); <script> To locate a canvas object, you need to access its 2D drawing context. W3C defines 2D drawing context in the following way, “The 2D context represents a flat Cartesian surface whose origin (0, 0) is at the top left corner, with the coordinate space having x values increasing when going right, and y values increasing when going down.” Canvas Coordinates
• 3.
  Coordinates in acanvas start at x=0, y=0 in the upper-left corner – which we refer as the origin (0, 0). Using fillRect(x,y, width,height) increases the size horizontally over the x-axis and vertically over the y-axis. 1 2 3 4 5 6 <script type="text/javascript"> windows.onload=function() { var canvas = document.getElementById('canvas1'); var context = canvas=getContext("2d"); context.fillRect(20,20,150,100)}; </script> Canvas – Paths You can render any shape using HTML5 Canvas API. You can draw shapes, lines, text and many more using HTML5 Canvas. Following are few functions which will help you to draw shapes using canvas. moveTo(x,y) Move the current pointer to a specific destination without drawing lineTo(x,y) Move the current pointer to a specific destination with drawing a straight line stroke() Render a line 1 2 3 4 5 6 7 8 <script type="text/javascript"> windows.onload=function() { var canvas = document.getElementById('canvas1'); var context = canvas=getContext("2d"); context.moveTo(0,0); context.lineTo(200,100); context.stroke();} </script> arc(x,y,r,start,stop) Use to render a circle with x & y coordinates, radius, starting and ending angle. beginPath() Start/Restart the path 1 2 3 4 5 6 7 8 <script type="text/javascript"> windows.onload=function() { var canvas = document.getElementById('canvas1'); var context = canvas=getContext("2d"); context.beginPath(); context.arc(95,50,40,0,2*Math.PI); context.stroke();}; </script> closePath() Close the current path
• 4.
  1 2 3 4 5 6 7 8 9 10 11 <script type="text/javascript"> windows.onload=function() { varcanvas = document.getElementById('canvas1'); var context = canvas=getContext("2d"); context.beginPath(); context.moveTo(20,20); context.lineTo(20,100); context.lineTo(70,100); context.closePath(); context.stroke();} </script> fill() Fill a shape with colour fillStyle FillStyle is property to fill colour or gradient 1 2 3 4 5 6 7 8 9 <script type="text/javascript"> windows.onload=function() { var canvas = document.getElementById('canvas1'); var context = canvas=getContext("2d"); context.rect(20,20,150,100); context.fillStyle="blue"; context.fill(); context.stroke();} </script&gt> fillText(text,x,y) Draws a filled text strokeText(text,x,y) Draws a text font Property defines the font for text fillText 1 2 3 4 5 6 7 8 <script type="text/javascript"> windows.onload=function() { var canvas = document.getElementById('canvas1'); var context = canvas=getContext("2d"); context.font = "30px Arial"; context. fillText ("Plunge into HTML5 Canvas ",10,50); context.stroke();} </script> strokeText 1 2 3 4 5 6 7 8 <script type="text/javascript"> windows.onload=function() { var canvas = document.getElementById('canvas1'); var context = canvas=getContext("2d"); context.font = "30px Arial"; context.strokeText("Plunge into HTML5 Canvas ",10,50); context.stroke();} </script> Browser Support for HTML5 Canvas After arrival of Internet Explorer 9, almost every browser vendors are trying to provide full support for the HTML5 Canvas but majorly available browsers are not providing full support
• 5.
  for HTML5 Canvas.Below is the browsers detail which tells you about that how they are dealing with HTML5 Canvas. Browser Description Internet Explorer IE 8 and earlier versions do not support <canvas> element Google Chrome Supports <canvas> element through –webkit– Firefox Firefox may have support via the moz setting Safari 6 for Mac Supports <canvas> element through –webkit– Opera Opera 15 has support of few features If you are working with the <canvas> element than it’s a good practice to check browser compatibility and in the case where the client’s browser is not supporting <canvas> element then you can place other alternate text. 1 2 3 4 5 6 7 8 9 &lt;script type=&quot;text/javascript&quot;&gt; windows.onload=function() { try{ document.createElement(&quot;canvas1&quot;).getContext(&quot;2d&quot;); document.getElementById(&quot;support&quot;).innerHTML =&quot;HTML5 Canvas is supported in your browser.&quot;; } catch (e) { document.getElementById(&quot;support&quot;).innerHTML = &quot;HTML5 Canvas is not supported in your browser.&quot;;} }; &lt;/script&gt; This article provides you the basic overview about the HTML5 Canvas and its different property and more. In the upcoming article we will discuss more about HTML5 Canvas like Background Patterns, Canvas Transforms, Canvas Security, Animation, etc. Stay Tuned!