Introduction to Canvas in HTML5

Posted by Mallesh Giduthuri in HTML 5 category on 7/31/2012 for Beginner level | Points: 250 | Views : 6818

Rating: 5 out of 5

1 vote(s)

Post Article |

Search Articles |

Articles Home

This article gives some brief introduction on Canvas element in HTML 5 that can exposes the fundas of how the canvas element works with an example.

Introduction and History

The Canvas concept was firstly introduced by Apple to be used in Mac OS X - to be in dashboard interfaces. Later it was implimented by other browsers and put the standards by the WHATWG (Web Hypertext Application Technology Working Group, http://whatwg.org/html ).

Objective

The main objective of this article is to expose the fundas of how the canvas element works in HTML5.

What is Canvas?

HTML5 defines the <canvas> element (drawing surface) is a rectangular area that allows you to render graphics and bitmaps dynamically inside web browsers.

When you use a canvas element in your web page, it creates some rectangular area on the page. And also offers to allow to control all the pixels of its content and manipulate them in many ways through the use of JavaScript code. By default this area is 300 pixels wide and 150 pixels height, but you can assign your own specified values and other attributes for your canvas element.

HTML 5 defines a set of functions for drawing shapes, defining paths, creating gradients, and applying transformations by using JavaScript and CSS cooperatively.

How Canvas works?

Understanding the Coordinates First:

To work with canvas you have to understand the Cartesian coordinates (2D, 3D-Geometry). As shown in below figure, coordinates in a canvas starts at x=0,y=0 in the upper left corner-called as 'origin'. The rate of change in pixels either in horizontal or in vertical manner the canvas effects in x-axis and y-axis respectively. The width attribute defaults to 300, and the height attribute defaults to 150.

Whenever the height and width attributes are changed, the Canvas is and any associated contexts must be cleared back to their initial state and reinitialized with the newly specified coordinate space dimensions.

Making the Drawing - Context:

We are going to make everything happens with JavaScript and the Canvas API by using the object context. Interfaces are defines the specifications of 2d context type using the CanvasRenderingContext2D interface. Briefly the 2D context represents a flat Cartesian surface whose origin is (0,0) at the top left corner, with the coordinate space having x values increasing when going right, and y values increasing when going down.

Canvas Declaration:

The first step to using canvas is to add a canvas element to the page as follows:

<canvas id="simpCanvas" width="500" height="400">

Your browser not supports canvas !

</canvas>

Using the code

Example code to draw a simple canvas (rectangle) as follows:

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Example</title>
    <style type="text/css">
        canvas { border: 2px solid Blue;  }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");            
            context.strokeStyle = "red";
            context.fillStyle = "green";
            context.strokeRect(30, 30, 100, 100);
            context.fillRect(30, 30, 100, 100);
        }        
    </script>
</head>
<body>
<canvas id="myCanvas">
    Sorry your browser doesn't support. 
    Update the browser..!
</canvas>
</body>
</html>

Output:

Explonation:

-- In the above code the css, let's add a simple style that adds a 2-pixel wide solid blue color border to the canvas. It is used to dispaly the toal available canvas surface.

-- The JavaScript code block the getElementById() method can gets the canvas id and is assigned to the variable 'canvas'.

-- The context variable is used to returned by the 'canvas' is assignedd to the context variable by getContext() method.

Note: We need a '"2d" context from the canvas to for actual drawings.

-- The method strokeRect(30, 30, 100, 100) is used for just outline the rectangle by providing the 'strokeStyle' as red color.

-- The fillRect(30, 30, 100, 100) is used to fill the color by acquiring the 'fillStyle' attribute as assignes green color here.

-- The Canvas id="myCanvas" is used to grab the element from the DOM.

Benifits of Canvas:

1. With HTML5's Canvas API, we can improve the performance of our websites by avoiding the need to download images off the network.
2. We can draw shapes and lines, arcs,text, gradients, patterns and many more graphical images.
3. The most important feature canvas provides us the power to manipualte pixels in images and in video also.

Canvas 2D Context specification is supported in: