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.
For this example we will use:
- A computer with a modern browser installed
- notepad++
1. What Is HTML/HTML5
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.
CSS allows you to style a webpage and it stands for cascading style sheets. CSS describes how HTML elements should be displayed.
JavaScript is used to program the behavior of web pages. JavaScript makes a webpage interactive.
HTML5 is the fifth and latest version of the HTML standard. HTML5 has added a lot of capabilities to HTML that simplifies the life of a lot of web developers.
1.1 What Is HTML5 Canvas
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.
Canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.
<canvas> </canvas>
You 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:
<canvas width=500 height=500 > </canvas>
To set the width and height through JavaScript we have to set an ID on our tag.
<canvas id=board > </canvas>
NOTE: It is also possible to create HTML5 canvas element on the fly with JavaScript document.createElement() function.
index.html
<!DOCTYPE html>
<html lang=en>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:hidden;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>HTML5 canvas test</title>
</head>
<body onload=init()>
<script>
function init(){
var canvas=document.getElementById("board");
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
}
</script>
<canvas id=board>
</canvas>
</body>
</html>
In the script above we get the canvas element and sets its width and height.
1.1 HTML5 Canvas Context
To draw on our canvas we need to get the canvas context. Lets do this in the next script.
index2.html
<!DOCTYPE html>
<html lang=en>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:hidden;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>HTML5 canvas test</title>
</head>
<body onload=init()>
<script>
function init(){
var canvas=document.getElementById("board");
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
con=canvas.getContext("2d");
}
</script>
<canvas id=board>
</canvas>
</body>
</html>
In line 28 we get the 2d context for drawing.
Note: 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.
Drawing A Rectangle
Lets draw a rectangle on our canvas.
index3.html
<!DOCTYPE html>
<html lang=en>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:hidden;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>HTML5 canvas test</title>
</head>
<body onload=init()>
<script>
function init(){
var canvas=document.getElementById("board");
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
con=canvas.getContext("2d");
con.strokeStyle="#000000";
con.strokeRect(20,20,150,100);
}
</script>
<canvas id=board>
</canvas>
</body>
</html>
In line 29 and 30 we set the strokestyle color and we draw the rect.
canvas.getContext("2d").stokeRect(x,y,w,h);
The parameter x is the x coordinate for rectangle.
The parameter y is the y coordinate for rectangle.
The parameter w is the width of the rectangle.
The parameter h is the height of rectangle.
Lets fill the rectangle with a color. We do this in the script below.
index4.html
<!DOCTYPE html>
<html lang=en>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:hidden;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>HTML5 canvas test</title>
</head>
<body onload=init()>
<script>
function init(){
var canvas=document.getElementById("board");
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
con=canvas.getContext("2d");
con.fillStyle="#000000";
con.fillRect(20,20,150,100);
}
</script>
<canvas id=board>
</canvas>
</body>
</html>
Drawing A Circle
Lets draw a circle on our canvas. To draw a circle we use the arc method.
canvas.getContext("2d").arc(x,y,r,start,end,clockwise);
index5.html
<!DOCTYPE html>
<html lang=en>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:hidden;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>HTML5 canvas test</title>
</head>
<body onload=init()>
<script>
function init(){
var canvas=document.getElementById("board");
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
con=canvas.getContext("2d");
con.fillStyle="#000000";
con.beginPath();
con.arc(100,75,50,0,2*Math.PI);
con.stroke();
}
</script>
<canvas id=board>
</canvas>
</body>
</html>
x represents the x coordinate of the center circle.
y represents the y coordinate of the center circle.
r is the radius of the circle.
Start is the starting angle of the circle.
End is the ending angle of the circle.
Clockwise specifies whether the drawing should be counterclockwise or clockwise. False is default and it is optional.
Drawing An Image On HTML5 Canvas
index6.html
<!DOCTYPE html>
<html lang=en>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:hidden;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>HTML5 canvas test</title>
</head>
<body onload=init()>
<script>
I = new Image();//create an image object
I.src="x.png";// load the image
function init(){
var canvas=document.getElementById("board");
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
con=canvas.getContext("2d");// get the 2d context
con.drawImage(I, 0,0);// draw the image
}
</script>
<canvas id=board>
</canvas>
</body>
</html>
Lets see another variable of the draw image method
index7.html
<!DOCTYPE html>
<html lang=en>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:hidden;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>HTML5 canvas test</title>
</head>
<body onload=init()>
<script>
I = new Image();//create an image object
I.src="x.png";// load the image
function init(){
var canvas=document.getElementById("board");
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
con=canvas.getContext("2d");
con.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
}
</script>
<canvas id=board>
</canvas>
</body>
</html>
This particular draw method takes 8 parameters.
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height );
img is the image to draw.
sx is the x coordinate of the image to draw.
sy is the is the y coordinate of the image to draw
swidth is the width of the image.
sheight is the height of the image.
x is the x coordinate of where to place the image on the canvas
y is the y coordinate of where to place the image on the canvas
width is the width of the image to use
height is the height of the image to use.
2. Summary
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.
3. Download the source code
Download
You can download the full source code of this example here: html5canvasexample
