In this example we are going to learn about HTML5 canvas. Canvas was added to HTML in HTML5. HTML5 canvas is a powerful tool (or container) that is used for drawing images and shapes.
\nFor this example we will use:<\/p>\n
\n
\n
\n
\n[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n
HTML is an abbreviation for Hypertext MarkUp Language and is used to describe a webpage. Combining HTML with JavaScript and CSS allows you to do a lot.<\/p>\n
CSS allows you to style a webpage and it stands for cascading style sheets. CSS describes how HTML elements should be displayed.<\/p>\n
JavaScript is used\u00a0to program the behavior of web pages. JavaScript makes a webpage interactive.<\/p>\n
HTML5 is the fifth and latest version of the HTML standard. HTML5 has added a lot of capabilities to HTML \u00a0that simplifies the life of a lot of web developers.<\/p>\n
HTML5 canvas combined with JavaScript is used to do a lot of things, from drawing, setting transparency levels on images to even animations and game development.
\nCanvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.<\/p>\n
<canvas>\r\n<\/canvas>\r\n\r\n<\/pre>\nYou can create an HTML5 canvas by using the tag above. You can also set the width and height of the canvas within its tag or you can do it with JavaScript. Lets look at the example below:<\/p>\n
<canvas width=500 height=500 >\r\n<\/canvas>\r\n\r\n<\/pre>\nTo set the width and height through JavaScript we have to set an ID on our tag.<\/p>\n
<canvas id=board >\r\n<\/canvas>\r\n\r\n<\/pre>\nNOTE: <\/b> It is also possible to create HTML5 canvas element on the fly with JavaScript
document.createElement()<\/code> function.<\/p>\nindex.html<\/em><\/span><\/p>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:hidden;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title>HTML5 canvas test<\/title>\r\n\t\r\n\t<\/head>\r\n\t<body onload=init()>\r\n<script>\r\nfunction init(){\r\nvar canvas=document.getElementById(\"board\");\r\ncanvas.width=document.body.clientWidth;\r\ncanvas.height=document.body.clientHeight;\r\n\r\n\r\n}\r\n\r\n<\/script>\r\n\t\r\n\t<canvas id=board>\r\n\t\r\n\t<\/canvas>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\nIn the script above we get the canvas element and sets its width and height.<\/p>\n
1.1 HTML5 Canvas Context<\/h3>\n
To draw on our canvas we need to get the canvas context. Lets do this in the next script.<\/p>\n
index2.html<\/em><\/span><\/p>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:hidden;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title>HTML5 canvas test<\/title>\r\n\t\r\n\t<\/head>\r\n\t<body onload=init()>\r\n<script>\r\nfunction init(){\r\nvar canvas=document.getElementById(\"board\");\r\ncanvas.width=document.body.clientWidth;\r\ncanvas.height=document.body.clientHeight;\r\ncon=canvas.getContext(\"2d\");\r\n\r\n}\r\n\r\n<\/script>\r\n\t\r\n\t<canvas id=board>\r\n\t\r\n\t<\/canvas>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\nIn line 28 we get the 2d context for drawing.
\nNote: <\/b> Normally we should write our JavaScript in a different file and link to it from our HTML file. This makes our code modular. It is also easier to re-use and maintain the code.<\/p>\nDrawing A Rectangle<\/h3>\n
Lets draw a rectangle on our canvas.<\/p>\n
index3.html<\/em><\/span><\/p>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:hidden;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title>HTML5 canvas test<\/title>\r\n\t\r\n\t<\/head>\r\n\t<body onload=init()>\r\n<script>\r\nfunction init(){\r\nvar canvas=document.getElementById(\"board\");\r\ncanvas.width=document.body.clientWidth;\r\ncanvas.height=document.body.clientHeight;\r\ncon=canvas.getContext(\"2d\");\r\ncon.strokeStyle=\"#000000\";\r\ncon.strokeRect(20,20,150,100);\r\n}\r\n\r\n<\/script>\r\n\t\r\n\t<canvas id=board>\r\n\t\r\n\t<\/canvas>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n\r\n\r\n\r\n\r\n<\/pre>\nIn line 29 and 30 we set the strokestyle color and we draw the rect.<\/p>\n
canvas.getContext(\"2d\").stokeRect(x,y,w,h);\r\n\r\n<\/pre>\nThe parameter x is the x coordinate for rectangle.
\nThe parameter y is the y coordinate for rectangle.
\nThe parameter w is the width of the rectangle.
\nThe parameter h is the height of rectangle.
\nLets fill the rectangle with a color. We do this in the script below.<\/p>\nindex4.html<\/em><\/span><\/p>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:hidden;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title>HTML5 canvas test<\/title>\r\n\t\r\n\t<\/head>\r\n\t<body onload=init()>\r\n<script>\r\nfunction init(){\r\nvar canvas=document.getElementById(\"board\");\r\ncanvas.width=document.body.clientWidth;\r\ncanvas.height=document.body.clientHeight;\r\ncon=canvas.getContext(\"2d\");\r\ncon.fillStyle=\"#000000\";\r\ncon.fillRect(20,20,150,100);\r\n}\r\n\r\n<\/script>\r\n\t\r\n\t<canvas id=board>\r\n\t\r\n\t<\/canvas>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\nDrawing A Circle<\/h3>\n
Lets draw a circle on our canvas. To draw a circle we use the arc method.<\/p>\n
canvas.getContext(\"2d\").arc(x,y,r,start,end,clockwise);\r\n\r\n<\/pre>\nindex5.html<\/em><\/span><\/p>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:hidden;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title>HTML5 canvas test<\/title>\r\n\t\r\n\t<\/head>\r\n\t<body onload=init()>\r\n<script>\r\nfunction init(){\r\nvar canvas=document.getElementById(\"board\");\r\ncanvas.width=document.body.clientWidth;\r\ncanvas.height=document.body.clientHeight;\r\ncon=canvas.getContext(\"2d\");\r\ncon.fillStyle=\"#000000\";\r\ncon.beginPath();\r\ncon.arc(100,75,50,0,2*Math.PI);\r\ncon.stroke();\r\n}\r\n\r\n<\/script>\r\n\t\r\n\t<canvas id=board>\r\n\t\r\n\t<\/canvas>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\nx represents the x coordinate of the center circle.
\ny represents the y coordinate of the center circle.
\nr is the radius of the circle.
\nStart is the starting angle of the circle.
\nEnd is the ending angle of the circle.
\nClockwise specifies whether the drawing should be counterclockwise or clockwise. False is default and it is optional.<\/p>\nDrawing An Image On HTML5 Canvas<\/h3>\n
index6.html<\/em><\/span><\/p>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:hidden;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title>HTML5 canvas test<\/title>\r\n\t\r\n\t<\/head>\r\n\t<body onload=init()>\r\n<script>\r\nI = new Image();\/\/create an image object\r\nI.src=\"x.png\";\/\/ load the image\r\nfunction init(){\r\nvar canvas=document.getElementById(\"board\");\r\ncanvas.width=document.body.clientWidth;\r\ncanvas.height=document.body.clientHeight;\r\ncon=canvas.getContext(\"2d\");\/\/ get the 2d context\r\ncon.drawImage(I, 0,0);\/\/ draw the image\r\n}\r\n\r\n<\/script>\r\n\t\r\n\t<canvas id=board>\r\n\t\r\n\t<\/canvas>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n\r\n<\/pre>\nLets see another variable of the draw image method<\/p>\n
index7.html<\/em><\/span><\/p>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:hidden;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title>HTML5 canvas test<\/title>\r\n\t\r\n\t<\/head>\r\n\t<body onload=init()>\r\n<script>\r\nI = new Image();\/\/create an image object\r\nI.src=\"x.png\";\/\/ load the image\r\nfunction init(){\r\nvar canvas=document.getElementById(\"board\");\r\ncanvas.width=document.body.clientWidth;\r\ncanvas.height=document.body.clientHeight;\r\ncon=canvas.getContext(\"2d\");\r\ncon.drawImage(I, 0,0,I.width\/2,I.height,10,10,I.width\/2,I.height);\/\/ another variation of the draw method used to draw part of the image\r\n}\r\n\r\n<\/script>\r\n\t\r\n\t<canvas id=board>\r\n\t\r\n\t<\/canvas>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\nThis particular draw method takes 8 parameters.<\/p>\n
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height );\r\n\r\n<\/pre>\nimg is the image to draw.
\nsx is the x coordinate of the image to draw.
\nsy is the is the y coordinate of the image to draw
\nswidth is the width of the image.
\nsheight is the height of the image.
\nx is the x coordinate of where to place the image on the canvas
\ny is the y coordinate of where to place the image on the canvas
\nwidth is the width of the image to use
\nheight is the height of the image to use.<\/p>\n2. Summary<\/h2>\n
In this example we learnt about the HTML5 canvas. What it is and how to use it. We learnt how to draw a rectangle, a circle and images on the HTML5 canvas.<\/p>\n
3. Download the source code<\/h2>\n