”;
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 of the above-mentioned methods to draw a triangle.
<!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''); // Filled triangle ctx.beginPath(); ctx.moveTo(25,25); ctx.lineTo(105,25); ctx.lineTo(25,105); ctx.fill(); // Stroked triangle ctx.beginPath(); ctx.moveTo(125,125); ctx.lineTo(125,45); ctx.lineTo(45,125); ctx.closePath(); 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 Bezier Curves
We need the following methods to draw Bezier curves 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 |
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
This method adds the given point to the current path, connected to the previous one by a cubic Bezier curve with the given control points. |
The x and y parameters in bezierCurveTo() method are the coordinates of the end point. cp1x and cp1y are the coordinates of the first control point, and cp2x and cp2y are the coordinates of the second control point.
Example
Following is a simple example which makes use of above mentioned methods to draw a Bezier curves.
<!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''); ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill(); } 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 Quadratic Curves
We require the following methods to draw quadratic curves 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 |
quadraticCurveTo(cpx, cpy, x, y)
This method adds the given point to the current path, connected to the previous one by a quadratic Bezier curve with the given control point. |
The x and y parameters in quadraticCurveTo() method are the coordinates of the end point. The cpx and cpy are the coordinates of the control point.
Example
Following is a simple example which makes use of above mentioned methods to draw a Quadratic curve.
<!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.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,30,125); ctx.quadraticCurveTo(60,120,65,100); ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25); 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 – Using Images
This tutorial would show how to import an external image into a canvas and then how to draw on that image by using following methods −
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 |
drawImage(image, dx, dy)
This method draws the given image onto the canvas. Here image is a reference to an image or canvas object. x and y form the coordinate on the target canvas where our image should be placed. |
Example
Following is a simple example which makes use of above mentioned methods to import an image.
<!DOCTYPE HTML> <html> <head> <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 var img = new Image(); img.src = ''/html/images/backdrop.jpg''; img.onload = function() { ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } } else { alert(''You need Safari or Firefox 1.5+ to see this demo.''); } } </script> </head> <body onload = "drawShape();"> <canvas id = "mycanvas"></canvas> </body> </html>
HTML Canvas – Create Gradients
HTML canvas allows us to fill and stroke shapes using linear and radial gradients using the following methods −
S.No. | Method & Description |
---|---|
1 |
addColorStop(offset, color)
This method adds a color stop with the given color to the gradient at the given offset. Here 0.0 is the offset at one end of the gradient, 1.0 is the offset at the other end. |
2 |
createLinearGradient(x0, y0, x1, y1)
This method returns a CanvasGradient object that represents a linear gradient that paints along the line given by the coordinates represented by the arguments. The four arguments represent the starting point (x1,y1) and end point (x2,y2) of the gradient. |
3 |
createRadialGradient(x0, y0, r0, x1, y1, r1)
This method returns a CanvasGradient object that represents a radial gradient that paints along the cone given by the circles represented by the arguments. The first three arguments define a circle with coordinates (x1,y1) and radius r1 and the second a circle with coordinates (x2,y2) and radius r2. |
Example – Linear Gradient
Following is a simple example which makes use of above mentioned methods to create Linear gradient.
<!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''); // Create Linear Gradients var lingrad = ctx.createLinearGradient(0,0,0,150); lingrad.addColorStop(0, ''#00ABEB''); lingrad.addColorStop(0.5, ''#fff''); lingrad.addColorStop(0.5, ''#66CC00''); lingrad.addColorStop(1, ''#fff''); var lingrad2 = ctx.createLinearGradient(0,50,0,95); lingrad2.addColorStop(0.5, ''#000''); lingrad2.addColorStop(1, ''rgba(0,0,0,0)''); // assign gradients to fill and stroke styles ctx.fillStyle = lingrad; ctx.strokeStyle = lingrad2; // draw shapes ctx.fillRect(10,10,130,130); 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>
Example – Radial Gradient
Following is a simple example which makes use of the above-mentioned methods to create Radial gradient.
<!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''); // Create gradients var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30); radgrad.addColorStop(0, ''#A7D30C''); radgrad.addColorStop(0.9, ''#019F62''); radgrad.addColorStop(1, ''rgba(1,159,98,0)''); var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50); radgrad2.addColorStop(0, ''#FF5F98''); radgrad2.addColorStop(0.75, ''#FF0188''); radgrad2.addColorStop(1, ''rgba(255,1,136,0)''); var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40); radgrad3.addColorStop(0, ''#00C9FF''); radgrad3.addColorStop(0.8, ''#00B5E2''); radgrad3.addColorStop(1, ''rgba(0,201,255,0)''); var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90); radgrad4.addColorStop(0, ''#F4F201''); radgrad4.addColorStop(0.8, ''#E4C700''); radgrad4.addColorStop(1, ''rgba(228,199,0,0)''); // draw shapes ctx.fillStyle = radgrad4; ctx.fillRect(0, 0, 150, 150); ctx.fillStyle = radgrad3; ctx.fillRect(0, 0, 150, 150); ctx.fillStyle = radgrad2; ctx.fillRect(0, 0, 150, 150); ctx.fillStyle = radgrad; ctx.fillRect(0, 0, 150, 150); } 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 – Styles and Colors
HTML canvas provides the following two important properties to apply colors to a shape −
S.No. | Method & Description |
---|---|
1 |
fillStyle
This attribute represents the color or style to use inside the shapes. |
2 |
strokeStyle
This attribute represents the color or style to use for the lines around shapes |
By default, the stroke and fill color are set to black which is CSS color value #000000.
Example – fillStyle
Following is a simple example which makes use of the above-mentioned fillStyle attribute to create a nice pattern.
<!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''); // Create a pattern for (var i=0;i<7;i++){ for (var j=0;j<7;j++){ ctx.fillStyle=''rgb('' + Math.floor(255-20.5*i)+ '',''+ Math.floor(255 - 42.5*j) + '',255)''; ctx.fillRect( j*25, i* 25, 55, 55 ); } } } 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>
Example – strokeStyle
Following is a simple example which makes use of the above-mentioned fillStyle attribute to create another nice pattern.
<!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''); // Create a pattern for (var i=0;i<10;i++){ for (var j=0;j<10;j++){ ctx.strokeStyle=''rgb(255,''+ Math.floor(50-2.5*i)+'',''+ Math.floor(155 - 22.5 * j ) + '')''; ctx.beginPath(); ctx.arc(1.5+j*25, 1.5 + i*25,10,10,Math.PI*5.5, true); 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 – Text and Fonts
HTML canvas provides capabilities to create text using different font and text properties listed below −
S.No. | Property & Description |
---|---|
1 |
font [ = value ]
This property returns the current font settings and can be set, to change the font. |
2 |
textAlign [ = value ]
This property returns the current text alignment settings and can be set, to change the alignment. The possible values are start, end, left, right, andcenter. |
3 |
textBaseline [ = value ]
This property returns the current baseline alignment settings and can be set, to change the baseline alignment. The possible values are top, hanging, middle , alphabetic, ideographic and bottom |
4 |
fillText(text, x, y [, maxWidth ] )
This property fills the given text at the given position indicated by the given coordinates x and y. |
5 |
strokeText(text, x, y [, maxWidth ] )
This property strokes the given text at the given position indicated by the given coordinates x and y. |
Example
Following is a simple example which makes use of above mentioned attributes to draw a text −
<!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''); ctx.fillStyle = ''#00F''; ctx.font = ''Italic 30px Sans-Serif''; ctx.textBaseline = ''Top''; ctx.fillText (''Hello world!'', 40, 100); ctx.font = ''Bold 30px Sans-Serif''; ctx.strokeText(''Hello world!'', 40, 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 – Pattern and Shadow
Create Pattern
There is following method required to create a pattern on the canvas −
S.No. | Method & Description |
---|---|
1 |
createPattern(image, repetition)
This method will use image to create the pattern. The second argument could be a string with one of the following values: repeat, repeat-x, repeat-y, and no-repeat. If the empty string or null is specified, repeat will. be assumed |
Example
Following is a simple example which makes use of above mentioned method to create a nice pattern.
<!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''); // create new image object to use as pattern var img = new Image(); img.src = ''/html/images/pattern.jpg''; img.onload = function(){ // create pattern var ptrn = ctx.createPattern(img,''repeat''); ctx.fillStyle = ptrn; ctx.fillRect(0,0,150,150); } } 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>
Assuming we have following pattern −
Create Shadows
HTML canvas provides capabilities to create nice shadows around the drawings. All drawing operations are affected by the four global shadow attributes.
S.No. | Property & Description |
---|---|
1 |
shadowColor [ = value ]
This property returns the current shadow color and can be set, to change the shadow color. |
2 |
shadowOffsetX [ = value ]
This property returns the current shadow offset X and can be set, to change the shadow offset X. |
3 |
shadowOffsetY [ = value ]
This property returns the current shadow offset Y and can be set, change the shadow offset Y. |
4 |
shadowBlur [ = value ]
This property returns the current level of blur applied to shadows and can be set, to change the blur level. |
Example
Following is a simple example which makes use of above mentioned attributes to draw a shadow.
<!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''); ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; ctx.font = "20px Times New Roman"; ctx.fillStyle = "Black"; ctx.fillText("This is shadow test", 5, 30); } 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 – Save and Restore States
HTML canvas provides two important methods to save and restore the canvas states. The canvas drawing state is basically a snapshot of all the styles and transformations that have been applied and consists of the followings −
-
The transformations such as translate, rotate and scale etc.
-
The current clipping region.
-
The current values of the following attributes − strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline.
Canvas states are stored on a stack every time the save method is called, and the last saved state is returned from the stack every time the restore method is called.
S.No. | Method & Description |
---|---|
1 |
save()
This method pushes the current state onto the stack.. |
2 |
restore()
This method pops the top state on the stack, restoring the context to that state. |
Example
Following is a simple example which makes use of above mentioned methods to show how the restore is called, to restore the original state and the last rectangle is once again drawn in black.
<!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 a rectangle with default settings ctx.fillRect(0,0,150,150); // Save the default state ctx.save(); // Make changes to the settings ctx.fillStyle = ''#66FFFF'' ctx.fillRect( 15,15,120,120); // Save the current state ctx.save(); // Make the new changes to the settings ctx.fillStyle = ''#993333'' ctx.globalAlpha = 0.5; ctx.fillRect(30,30,90,90); // Restore previous state ctx.restore(); // Draw a rectangle with restored settings ctx.fillRect(45,45,60,60); // Restore original state ctx.restore(); // Draw a rectangle with restored settings ctx.fillRect(40,40,90,90); } 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 – Translation
HTML canvas provides translate(x, y) method which is used to move the canvas and its origin to a different point in the grid.
Here argument x is the amount the canvas is moved to the left or right, and y is the amount it”s moved up or down
Example
Following is a simple example which makes use of above method to draw various Spirographs −
<!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''); ctx.fillRect(0,0,300,300); for (i=0;i<3;i++) { for (j=0;j<3;j++) { ctx.save(); ctx.strokeStyle = "#FF0066"; ctx.translate(50+j*100,50+i*100); drawSpirograph(ctx,10*(j+3)/(j+2),-2*(i+3)/(i+1),10); ctx.restore(); } } } else { alert(''You need Safari or Firefox 1.5+ to see this demo.''); } } function drawSpirograph(ctx,R,r,O){ var x1 = R-O; var y1 = 0; var i = 1; ctx.beginPath(); ctx.moveTo(x1,y1); do { if (i>20000) break; var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72)) var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72)) ctx.lineTo(x2,y2); x1 = x2; y1 = y2; i++; } while (x2 != R-O && y2 != 0 ); ctx.stroke(); } </script> </head> <body id="test" onload="drawShape();"> <canvas id="mycanvas" width="400" height="400"></canvas> </body> </html>
HTML Canvas – Rotation
HTML canvas provides rotate(angle) method which is used to rotate the canvas around the current origin.
This method only takes one parameter and that”s the angle the canvas is rotated by. This is a clockwise rotation measured in radians.
Example
Following is a simple example which we are running two loops where first loop determines the number of rings, and the second determines the number of dots drawn in each ring.
<!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''); ctx.translate(100,100); for (i=1; i<7; i++){ ctx.save(); ctx.fillStyle = ''rgb(''+(51*i)+'',''+(200-51*i)+'',0)''; for (j=0; j < i*6; j++){ ctx.rotate(Math.PI*2/(i*6)); ctx.beginPath(); ctx.arc(0,i*12.5,5,0,Math.PI*2,true); ctx.fill(); } ctx.restore(); } } else { alert(''You need Safari or Firefox 1.5+ to see this demo.''); } } </script> </head> <body id="test" onload="drawShape();"> <canvas id="mycanvas" width="400" height="400"></canvas> </body> </html>
HTML Canvas – Scaling
HTML canvas provides scale(x, y) method which is used to increase or decrease the units in our canvas grid. This can be used to draw scaled down or enlarged shapes and bitmaps.
This method takes two parameters where x is the scale factor in the horizontal direction and y is the scale factor in the vertical direction. Both parameters must be positive numbers.
Values smaller than 1.0 reduce the unit size and values larger than 1.0 increase the unit size. Setting the scaling factor to precisely 1.0 doesn”t affect the unit size.
Example
Following is a simple example which uses spirograph function to draw nine shapes with different scaling factors.
<!DOCTYPE html> <html> <head> <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''); ctx.strokeStyle = "#fc0"; ctx.lineWidth = 1.5; ctx.fillRect(0,0,300,300); // Uniform scaling ctx.save() ctx.translate(50,50); drawSpirograph(ctx,22,6,5); ctx.translate(100,0); ctx.scale(0.75,0.75); drawSpirograph(ctx,22,6,5); ctx.translate(133.333,0); ctx.scale(0.75,0.75); drawSpirograph(ctx,22,6,5); ctx.restore(); // Non uniform scaling (y direction) ctx.strokeStyle = "#0cf"; ctx.save() ctx.translate(50,150); ctx.scale(1,0.75); drawSpirograph(ctx,22,6,5); ctx.translate(100,0); ctx.scale(1,0.75); drawSpirograph(ctx,22,6,5); ctx.translate(100,0); ctx.scale(1,0.75); drawSpirograph(ctx,22,6,5); ctx.restore(); // Non uniform scaling (x direction) ctx.strokeStyle = "#cf0"; ctx.save() ctx.translate(50,250); ctx.scale(0.75,1); drawSpirograph(ctx,22,6,5); ctx.translate(133.333,0); ctx.scale(0.75,1); drawSpirograph(ctx,22,6,5); ctx.translate(177.777,0); ctx.scale(0.75,1); drawSpirograph(ctx,22,6,5); ctx.restore(); } else { alert(''You need Safari or Firefox 1.5+ to see this demo.''); } } function drawSpirograph(ctx,R,r,O){ var x1 = R-O; var y1 = 0; var i = 1; ctx.beginPath(); ctx.moveTo(x1,y1); do { if (i>20000) break; var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72)) var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72)) ctx.lineTo(x2,y2); x1 = x2; y1 = y2; i++; } while (x2 != R-O && y2 != 0 ); ctx.stroke(); } </script> </head> <body onload="drawShape();"> <canvas id="mycanvas" width="400" height="400"></canvas> </body> </html>
HTML Canvas – Transforms
HTML canvas provides methods which allow modifications directly to the transformation matrix. The transformation matrix must initially be the identity transform. It may then be adjusted using the transformation methods.
S.No. | Method & Description |
---|---|
1 |
transform(m11, m12, m21, m22, dx, dy)
This method changes the transformation matrix to apply the matrix given by the arguments. |
2 |
setTransform(m11, m12, m21, m22, dx, dy)
This method changes the transformation matrix to the matrix given by the arguments . |
The transform (m11, m12, m21, m22, dx, dy) method must multiply the current transformation matrix with the matrix described by −
m11 m21 dx m12 m22 dy 0 0 1
The setTransform(m11, m12, m21, m22, dx, dy) method must reset the current transform to the identity matrix, and then invoke the transform(m11, m12, m21, m22, dx, dy) method with the same arguments.
Example
Following is a simple example which makes use of transform() and setTransform() methods −
<!DOCTYPE html> <html> <head> <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''); var sin = Math.sin(Math.PI/6); var cos = Math.cos(Math.PI/6); ctx.translate(200, 200); var c = 0; for (var i=0; i <= 12; i++) { c = Math.floor(255 / 12 * i); ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")"; ctx.fillRect(0, 0, 100, 100); ctx.transform(cos, sin, -sin, cos, 0, 0); } ctx.setTransform(-1, 0, 0, 1, 200, 200); ctx.fillStyle = "rgba(100, 100, 255, 0.5)"; ctx.fillRect(50, 50, 100, 100); } else { alert(''You need Safari or Firefox 1.5+ to see this demo.''); } } </script> </head> <body onload="drawShape();"> <canvas id="mycanvas" width="400" height="400"></canvas> </body> </html>
HTML Canvas – Composition
HTML canvas provides compositing attribute globalCompositeOperation which affect all the drawing operations.
We can draw new shapes behind existing shapes and mask off certain areas, clear sections from the canvas using globalCompositeOperation attribute as shown below in the example.
There are following values which can be set for globalCompositeOperation −
S.No. | Attribute & Description |
---|---|
1 |
source-over
This is the default setting and draws new shapes on top of the existing canvas content. |
2 |
source-in
The new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent. |
3 |
source-out
The new shape is drawn where it doesn”t overlap the existing canvas content. |
4 |
source-atop
The new shape is only drawn where it overlaps the existing canvas content. |
5 |
lighter
Where both shapes overlap the color is determined by adding color values. |
6 |
xor
Shapes are made transparent where both overlap and drawn normal everywhere else. |
7 |
destination-over
New shapes are drawn behind the existing canvas content. |
8 |
destination-in
The existing canvas content is kept where both the new shape and existing canvas content overlap. Everything else is made transparent. |
9 |
destination-out
The existing content is kept where it doesn”t overlap the new shape. |
10 |
destination-atop
The existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content. |
11 |
darker
Where both shapes overlap the color is determined by subtracting color values. |
Example
Following is a simple example which makes use of globalCompositeOperation attribute to create all possible compositions −
<!DOCTYPE html> <html> <head> <script type="text/javascript"> var compositeTypes = [ ''source-over'',''source-in'',''source-out'',''source-atop'', ''destination-over'',''destination-in'',''destination-out'', ''destination-atop'',''lighter'',''darker'',''copy'',''xor'' ]; function drawShape(){ for (i=0;i<compositeTypes.length;i++){ var label = document.createTextNode(compositeTypes[i]); document.getElementById(''lab''+i).appendChild(label); var ctx = document.getElementById(''tut''+i).getContext(''2d''); // draw rectangle ctx.fillStyle = "#FF3366"; ctx.fillRect(15,15,70,70); // set composite property ctx.globalCompositeOperation = compositeTypes[i]; // draw circle ctx.fillStyle = "#0066FF"; ctx.beginPath(); ctx.arc(75,75,35,0,Math.PI*2,true); ctx.fill(); } } </script> </head> <body onload="drawShape();"> <table border="1" align="center"> <tr> <td><canvas id="tut0" width="125" height="125"></canvas><br/> <label id="lab0"></label> </td> <td><canvas id="tut1" width="125" height="125"></canvas><br/> <label id="lab1"></label> </td> <td><canvas id="tut2" width="125" height="125"></canvas><br/> <label id="lab2"></label> </td> </tr> <tr> <td><canvas id="tut3" width="125" height="125"></canvas><br/> <label id="lab3"></label> </td> <td><canvas id="tut4" width="125" height="125"></canvas><br/> <label id="lab4"></label> </td> <td><canvas id="tut5" width="125" height="125"></canvas><br/> <label id="lab5"></label> </td> </tr> <tr> <td><canvas id="tut6" width="125" height="125"></canvas><br/> <label id="lab6"></label> </td> <td><canvas id="tut7" width="125" height="125"></canvas><br/> <label id="lab7"></label> </td> <td><canvas id="tut8" width="125" height="125"></canvas><br/> <label id="lab8"></label> </td> </tr> <tr> <td><canvas id="tut9" width="125" height="125"></canvas><br/> <label id="lab9"></label> </td> <td><canvas id="tut10" width="125" height="125"></canvas><br/> <label id="lab10"></label> </td> <td><canvas id="tut11" width="125" height="125"></canvas><br/> <label id="lab11"></label> </td> </tr> </table> </body> </html>
HTML Canvas – Animations
HTML canvas provides necessary methods to draw an image and erase it completely. We can take Javascript help to simulate good animation over a HTML canvas.
Following are the two important Javascript methods which would be used to animate an image on a canvas −
S.No. | Method & Description |
---|---|
1 |
setInterval(callback, time);
This method repeatedly executes the supplied code after a given timemilliseconds. |
2 |
setTimeout(callback, time);
This method executes the supplied code only once after a given time milliseconds. |
Example
Following is a simple example which would rotate a small image repeatedly −
<!DOCTYPE html> <html> <head> <script type="text/javascript"> var pattern= new Image(); function animate(){ pattern.src = ''/html/images/pattern.jpg''; setInterval(drawShape, 100); } 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''); ctx.fillStyle = ''rgba(0,0,0,0.4)''; ctx.strokeStyle = ''rgba(0,153,255,0.4)''; ctx.save(); ctx.translate(150,150); var time = new Date(); ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ( (2*Math.PI)/6000)*time.getMilliseconds() ); ctx.translate(0,28.5); ctx.drawImage(pattern,-3.5,-3.5); ctx.restore(); } else { alert(''You need Safari or Firefox 1.5+ to see this demo.''); } } </script> </head> <body onload="animate();"> <canvas id="mycanvas" width="400" height="400"></canvas> </body> </html>
”;