plunge into html5 canvas – let’s begin
TRANSCRIPT
Plunge into HTML5 Canvas – 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.
In 2012, first draft of HTML5 is published as a working draft for the candidaterecommendation 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 Element1<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.12345
<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,12345
<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
Coordinates in a canvas 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.123456
<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 drawinglineTo(x,y) Move the current pointer to a specific destination with drawing a
straight linestroke() Render a line12345678
<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 path12345678
<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
123456789
1011
<script type="text/javascript">windows.onload=function() {var canvas = 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 colourfillStyle FillStyle is property to fill colour or gradient123456789
<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 textstrokeText(text,x,y) Draws a textfont Property defines the font for text
fillText12345678
<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>
strokeText12345678
<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
for HTML5 Canvas. Below is the browsers detail which tells you about that how they are
dealing with HTML5 Canvas.
Browser DescriptionInternet Explorer IE 8 and earlier versions do not support <canvas>
elementGoogle Chrome Supports <canvas> element through –webkit–Firefox Firefox may have support via the moz settingSafari 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.
123456789
<script type="text/javascript">windows.onload=function() {try{document.createElement("canvas1").getContext("2d");document.getElementById("support").innerHTML ="HTML5 Canvas is supported in your browser.";} catch (e) {document.getElementById("support").innerHTML = "HTML5 Canvas is not supported in your browser.";}};</script>
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!
