HTML – Canvas
”; Previous Next
HTML element <canvas> gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations.
Here is a simple <canvas> element which has only two specific attributes width and height plus all the core HTML attributes like id, name and class, etc.
<canvas id=”mycanvas” width=”100″ height=”100″></canvas>
You can easily find that <canvas> element in the DOM using getElementById() method as follows −
var canvas = document.getElementById(“mycanvas”);
Example
Let us see a sample example that shows how to use <canvas> element in HTML document.
<!DOCTYPE html>
<html>
<head>
<style>
#mycanvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id=”mycanvas” width=”100″ height=”100″></canvas>
</body>
</html>
The Rendering Context
The <canvas> is initially blank, and to display something, a script first needs to access the rendering context. The canvas element has a DOM method called getContext, which is used to obtain the rendering context and its drawing functions. This function takes one parameter, the type of context 2d.
Instance
Following is the code to get required context along with a check if the browser supports <canvas> element −
var canvas = document.getElementById(“mycanvas”);
if (canvas.getContext){
var ctx = canvas.getContext(”2d”);
// drawing code here
} else {
// canvas-unsupported code here
}
Browser Support
The latest versions of Firefox, Safari, Chrome and Opera all support for HTML Canvas but IE8 does not support canvas natively.
You can use ExplorerCanvas to have canvas support through Internet Explorer. You just need to include this JavaScript as follows −
<!–[if IE]><script src=”excanvas.js”></script><![endif]–>
HTML Canvas – Drawing Rectangles
There are three methods that draw rectangles on the canvas −
S.No.
Method & Description
1
fillRect(x,y,width,height) This method draws a filled rectangle.
2
strokeRect(x,y,width,height) This method draws a rectangular outline.
3
clearRect(x,y,width,height) This method clears the specified area and makes it fully transparent
Here x and y specify the position on the canvas (relative to the origin) of the top-left corner of the rectangle and width and height are width and height of the rectangle.
Example
Following is a simple example which makes use of above mentioned methods to draw a nice rectangle.
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type=”text/javascript”>
function drawShape(){
// Get the canvas element using the DOM
var canvas = document.getElementById(”mycanvas”);
// Make sure we don”t execute when canvas isn”t supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext(”2d”);
// Draw shapes
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
} else {
alert(”You need Safari or Firefox 1.5+ to see this demo.”);
}
}
</script>
</head>
<body id=”test” onload=”drawShape();”>
<canvas id=”mycanvas”></canvas>
</body>
</html>
HTML Canvas – Drawing Paths
We require the following methods to draw paths on the canvas −
S.No.
Method & Description
1
beginPath()
This method resets the current path.
2
moveTo(x, y)
This method creates a new subpath with the given point.
3
closePath()
This method marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.
4
fill()
This method fills the subpaths with the current fill style.
5
stroke()
This method strokes the subpaths with the current stroke style.
6
arc(x, y, radius, startAngle, endAngle, anticlockwise)
Adds points to the subpath such that the arc described by the circumference of the circle described by the arguments, starting at the given start angle and ending at the given end angle, going in the given direction, is added to the path, connected to the previous point by a straight line.
Example
Following is a simple example which makes use of above mentioned methods to draw a shape.
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type=”text/javascript”>
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById(”mycanvas”);
// Make sure we don”t execute when canvas isn”t supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext(”2d”);
// Draw shapes
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
} else {
alert(”You need Safari or Firefox 1.5+ to see this demo.”);
}
}
</script>
</head>
<body id=”test” onload=”drawShape();”>
<canvas id=”mycanvas”></canvas>
</body>
</html>
HTML Canvas – Drawing Lines
Line Methods
We require the following methods to draw lines on the canvas −
S.No.
Method & Description
1
beginPath()
This method resets the current path.
2
moveTo(x, y)
This method creates a new subpath with the given point.
3
closePath()
This method marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.
4
fill()
This method fills the subpaths with the current fill style.
5
stroke()
This method strokes the subpaths with the current stroke style.
6
lineTo(x, y)
This method adds the given point to the current subpath, connected to the previous one by a straight line.
Example
Following is a simple example which makes use