Canvas Tag
The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript) to actually draw the graphics .<canvas> tag is introduced in HTML5.
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, characters, and adding images. The text between <canvas> and </canvas> is rendered as is in the browsers that do not have canvas support. In other words we can say that any content between the <canvas></canvas> tags is "fallback content"- meaning, it will be displayed only if the canvas cannot be displayed.
Browser Supporting Canvas Tag
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the <canvas> element.
NOTE: Internet Explorer 8 and earlier versions, do not support the <canvas> element.
Attributes used along with Canvas Tag
| Attribute |
Description |
| Width |
Specifies the canvas width in pixels.
Possible values: Non-Negative Integer
|
| Height |
Specifies the canvas height in pixels.
Possible values: Non-Negative Integer
|
Steps for implementation of the canvas
A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element. You can have multiple <canvas> elements on one HTML page.
Note: By default, the <canvas> element has no border and no content.
For Example
<canvas id="myCanvas" width="200" height="100"></canvas>
All drawing on the Canvas is done inside the javascript.
- To draw line on the canvas we will use the two method.
moveTo(x,y): It defines the starting point of the line.
lineTo(x,y): It defines the ending point of the line.
- To draw a circle on the canvas we will use the following method.
arc(x,y,r,start,stop)
To actually draw the circle, we must use one of the methods, like stroke() or fill().
- To draw the the text on the canvas
font - defines the font properties for text.
fillText(text,x,y) - Draws "filled" text on the canvas.
strokeText(text,x,y) - Draws text on the canvas (no fill).
- To draw an image on the canvas
drawImage(image,x,y).
Example of Canvas Tag in HTML5
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Canvas Tag in HTML5</title>
</head>
<body>
<h1>Implementation of Canvas Tag in HTML5</h1>
<img id="Tulip" src="/C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg" alt="Flower" width="180" height="200" />
<canvas id="myCanvas" width="200" height="200" style="border: 1px solid Black"></canvas>
<script type="text/javascript">
//Draw onto canvas
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(25, 50, 150, 75);
//Give a cap style to Canvas Line.
context.beginPath();
context.moveTo(50, 10);
context.lineTo(150, 10);
context.lineWidth = 10;
context.strokeStyle = "blue";
context.lineCap = "butt";
context.stroke();
context.beginPath();
context.moveTo(50, 30);
context.lineTo(150, 30);
context.lineWidth = 10;
context.strokeStyle = "blue";
context.lineCap = "round";
context.stroke();
context.beginPath();
context.moveTo(50, 50);
context.lineTo(150, 50);
context.lineWidth = 10;
context.strokeStyle = "blue";
context.lineCap = "square";
context.stroke();
//Create a circle with the arc() method.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 92, 30, 0, 2 * Math.PI);
ctx.stroke();
//Draw fillText(text,x,y) on Canvas.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 20, 160);
var img = document.getElementById("Tulip");
context.drawImage(img, 50, 50);
</script>
</body>
</html>
Output
