Contact for Expert ServicesAdvertise with Ecomspark. Contact me .

HTML5 Canvas : An Introduction

In earlier posts, we read about html5 introduction, html5 semantic elements and html5 form inputs and attributes.

Now, we will discuss about html5 canvas <canvas> element. Canvas is an element used to draw graphics, game graphics, graphs,charts, multicolor rectangles on the web. Canvas used java script to draws animated rectangles, graphics, graphs etc, because of java script used it became very easy to interact with it.

HTML5 canvas was introduced by Apple in 2004 for use in Mac OS X WebKit. Later W3C has adopted it in the upcoming HTML5 specification. Now, it is supported by all major modern browsers.

Canvas does not have any border or content in it, we need to define width and height attribute for any canvas.

For Eg – <canvas id=”samplecanvas” width=”400″ height=”600″></canvas>

Lets give an border to this canvas – <canvas id=”samplecanvas” width=”200″ height=”100″ style=”border:1px solid #000000;”>

This is the sample code for the above example –

<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{
   border:1px solid red;
}
</style>
</head>
<body>
   <canvas id="mycanvas" width="200" height="100"></canvas>
</body>
</html>

 

Always use the id element for canvas to find the canvas by getElementById() method as follows:
var canvas = document.getElementById(“samplecanvas”);

Each canvas has a drawing context, the basic difference between canvas element and canvas context is – canvas element is dom node and embedded in HTML and canvas context is an object with methods and properties that we used to draw graphics inside the canvas element. Its called canvas context  or getContext()  method.  getContext() method takes one parameter, the type of context 2d .

Following is the sample code –

<canvas id="Canvas" width="200" height="100" style="border:1px solid #c3c3c3;">

</canvas>

<script>

var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#cccccc";
ctx.fillRect(0,0,250,75);

</script>

As, you can see we defined a canvas with width , height and border attribute attributes.

Lets first find the canvas element by –

var c = document.getElementById("Canvas");

then, call getContext methods –

var ctx = c.getContext("2d");

getContext(“2d”) is an html5 inbuilt method used to draw lines, boxes, circles, text, images and many more.

ctx.fillStyle = "#cccccc";
ctx.fillRect(0,0,250,75);

fillStyle is css property to fill color and fillRect(x,y,width, height) is used to draw rectangle with current fill style.

Note– the upper left corner of canvas having (0,0) coordinates.

canvasCoordinates Ecomspark.com

Some properties used to draw canvas rectangles –

  • The fillStyle property is a CSS color, a pattern, or a gradient. The default fillStyle is solid black, but we can set color whatever we like.
  • fillRect(x, y, width, height) draws a rectangle filled with the current fill style.
  • The strokeStyle property is like fillStyle — a css color.
  • strokeRect(x, y, width, height) draws an rectangle with the current stroke style. strokeRect doesn’t fill in the middle; it just draws the edges.
  • clearRect(x, y, width, height) clears the pixels in the specified rectangle.

How to draw lines using html5 canvas?

Translate »