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, multicolour rectangles on the web. Canvas used javascript to draws animated rectangles, graphics, graphs etc, because of javascript used it became very easy to interact with it.

Introduction

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 the 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;”>

Sample Code

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

Code Example

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 colour and fillRect(x,y, width, height) is used to draw a rectangle with current fill style.

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

canvasCoordinates Ecomspark.com

Properties to draw Canvas Rectangles

  • The fillStyle property is a CSS colour, a pattern, or a gradient. The default fillStyle is solid black, but we can set colour 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 colour.
  • strokeRect(x, y, width, height) draws a 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?

Leave a Reply