Introduction to Canvas in HTML5

The canvas element is a newly introduced element and is a part of HTML5. It allows dynamic scripting and rendering of 2D shapes and bitmap images.

Canvas actually is like a drawing board on which you can draw something. It will have a height and width. Now, you might have a question, “how do I write on it?

Well, the answer is very simple.
You can write your JavaScript code and your code will have access to the entire canvas region. You can use a full set of drawing functions provided similar to any other API’S which provides 2D drawing functions. You can build Graphs, animations, games and image compositions.

What are the possibilities?

Well, I would say the possibilities are infinite. Here are few links which shows what can be achieved using a HTML5 canvas and some JavaScript code.

Note: HTML5 is not yet an official standard, and no browsers have full HTML5 support. But all major browsers (Safari, Chrome, Firefox, Opera, and Internet Explorer) continue to add new HTML5 features to their latest versions. Make sure you are running the above demos on a browser that supports HTML5.

How can we use it?

Just like any other html element on html, you can have a canvas element.

Your browser does not support the canvas element if you are seeing this.

How can I write a rectangle on above canvas?
var c=document.getElementById("myCanvas");
var obj=c.getContext("2d");

Result of above

HTML5 Canvas output

In above example, the JavaScript code first refers to the id of the canvas and then
The c.getContext("2d") object is a built-in HTML5 object, with many functions to draw lines, boxes, circles, characters and images. The last two lines draw a red filled rectangle inside the canvas.

Instead of Rectangle, if you want to draw a circle, just replace the” obj.fillRect(0,0,150,75);
“ with below code

Let us understand some more interesting things of HTML5 & Canvas in near future.

Popular posts from this blog

Facebook Javascript API : Feed and Share Dialog for Beginners

Developing a Link Chopper using C# and API in 1 Hour

WCF: Operation Overloading inside Service Contracts using C#