The canvas element is used to draw graphics on a web page.
What is Canvas?
The HTML5 canvas element uses JavaScript to draw graphics on a web page.
A canvas is a rectangular area, and you control every pixel of it.
The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.
Create a Canvas Element
Add a canvas element to the HTML5 page.
Specify the id, width, and height of the element:
<canvas id="myCanvas" width="200" height="100"></canvas>
Draw With JavaScript
The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript:
Example
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
JavaScript uses the id to find the canvas element:
var c=document.getElementById("myCanvas");
Then, create a context object:
var ctx=c.getContext("2d");
The getContext("2d") object is a built-in HTML5 object, with many methods to draw paths, boxes, circles, characters, images and more.
The next two lines draws a red rectangle:
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
ctx.fillRect(0,0,150,75);
The fillStyle method makes it red, and the fillRect method specifies the shape, position, and size.
Understanding Coordinates
The fillRect method above had the parameters (0,0,150,75).
This means: Draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0).
The canvas' X and Y coordinates are used to position drawings on the canvas.
Mouse over the rectangle below to see the coordinates:
X
Y
More Canvas Examples
Below are more examples of drawing on the canvas element:
Example - Line
Draw a line by specifying where to start, and where to stop:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(150,50);
ctx.lineTo(10,50);
ctx.stroke();
</script>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Example - Circle
Draw a circle by specifying the size, color, and position:
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(70,18,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
</script>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Example - Gradient
Draw a gradient background with the colors you specify:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,175,50);
</script>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Example - Image
Put an image on the canvas:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
window.onload=function()
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.src="img_flwr.png";
ctx.drawImage(img,0,0);
}
</script>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
HTML5 <canvas> Tag
| Tag | Description |
|---|---|
| <canvas> | Defines graphics |
Complete Canvas 2d Reference
For a complete reference of all the attributes and methods that can be used with the canvas object, go to our complete canvas 2d reference.
