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.
What are the possibilities?
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.
How can I write a rectangle on above canvas?
var c=document.getElementById("myCanvas"); var obj=c.getContext("2d"); obj.fillStyle="#FF0000"; obj.fillRect(0,0,150,75);
Result of above
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
obj.beginPath(); obj.arc(70,18,15,0,Math.PI*2,true); obj.closePath(); obj.fill();
Let us understand some more interesting things of HTML5 & Canvas in near future.