What is a HTML <canvas> tag ?
HTML <canvas> element is used to draw graphics via scripting usually Javascript.
HTML <canvas> was originally introduced by Apple for the Mac OS dashboard widgets and to power graphics in the Safari web browser.
Later it was adopted by the other browsers like Firefox, Google Chrome and Opera.
Now canvas became a part of the new HTML5 specification for next generation web technologies.
Why HTML <canvas> tag is used ?
The main purpose of using <canvas> element is to draw 2D graphics.
HTML <canvas> element is used to draw paths, boxes, circles, text, and adding images in the webpages.
HTML <canvas> element is also used for animation, game graphics, data visualisation, photo manipulation, and real-time video processing.
How HTML <canvas> element works ?
HTML <canvas> element is a container which is used to draw graphics with the help of Javascript.
HTML <canvas> element have several methods to draw paths, boxes, circles, text, and adding images.
Default size of the canvas is 300 pixels × 150 pixels (width × height).
We can modify the default width and height by using the CSS height and width property whereas the border can be applied using the CSS border property.
HTML <canvas> element, by default have no border and no content.
HTML beginners tutorial !!!
Click to Learn More about – HTML Tutorial for beginners
Syntax :
<canvas id = "myCanvasId" width ="300" height ="150"> </canvas>
How to draw using <canvas> element with Javascript ?
1. Find out the canvas element using javascript.
This can be done by getting the canvas element by using Javascript.
var canvas = document.getElementById("myCanvasId");
2. Creating a drawing object.
Next we have to create a drawing object for the canvas.
This can be done using getContext() method.
getContext() is a HTML built-in object contains its own properties and methods.
var context = canvas.getContext("2d");
3. Drawing on canvas.
We can draw on the canvas, by using fill style property.
We can specify colors, gradient or pattern in fill style property to apply colors on the canvas.
ctx.fillStyle = "#E91135";
Canvas implementation techniques
HTML <canvas> element is used in many ways some of them are listed below,
1. Drawing Lines
2. Drawing square box
3. Drawing Rectangular box
4. Drawing circle
5. Drawing text
1. Drawing Lines
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Canvas</title>
</head>
<body>
<canvas id="myCanvasId" width="300" height="150" style="border:1px solid red;">
<script>
var canvas = document.getElementById("myCanvasId");
var ele = canvas.getContext("2d");
ele.beginPath();
ele.moveTo(0, 0);
ele.lineTo(400, 100);
ele.stroke();
</script>
</body>
</html>
Output :
2. Drawing square box
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Canvas</title>
</head>
<body>
<canvas id="myCanvasId" width="350" height="350" style="border:1px solid red;">
<script>
var canvas = document.getElementById("myCanvasId");
var ele = canvas.getContext("2d");
ele.fillStyle = "green";
ele.fillRect(50, 50, 200, 200);
</script>
</body>
</html>
Output :
3. Drawing Rectangular box
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Canvas</title>
</head>
<body>
<canvas id="myCanvasId" width="350" height="350" style="border:1px solid red;">
<script>
var canvas = document.getElementById("myCanvasId");
var ele = canvas.getContext("2d");
ele.fillStyle = "blue";
ele.fillRect(50, 50, 250, 100);
</script>
</body>
</html>
Output :
4. Drawing circle
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Canvas</title>
</head>
<body>
<canvas id="myCanvasId" width="350" height="350" style="border:1px solid red;">
<script>
var canvas = document.getElementById("myCanvasId");
var ele = canvas.getContext("2d");
ele.beginPath();
ele.arc(150,150,100,0,2*Math.PI);
ele.stroke();
</script>
</body>
</html>
Output :
5. Drawing text
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Canvas</title>
</head>
<body>
<canvas id="myCanvasId" width="350" height="350" style="border:1px solid red;">
<script>
var canvas = document.getElementById("myCanvasId");
var ele = canvas.getContext("2d");
ele.font = "20px LatoBold";
ele.fillText("Welcome to CSTechbook",50,150);
</script>
</body>
</html>
Output :
<canvas> Tag Attributes
HTML <canvas> tag support following specific attributes.
| Sno | Attributes | Value | Description |
|---|---|---|---|
| 1 | width | size | Define canvas Width. |
| 2 | height | size | Define canvas Height. |
Global Attributes
HTML <canvas> tag support following global attributes.
| Sno | Attributes | Value | Description |
|---|---|---|---|
| 1 | id | unique_name | Declared unique id for an element. |
| 2 | class | class_name | Declared one or more classnames for an element. |
| 3 | style | styles | CSS inline styles specify an element. |
| 4 | title | title | Specify extra details of element contain, this will display as a “tooltip” for an elements. |
Event Attributes
HTML <canvas> tag support following event attributes.
| Sno | Attributes | Value | Description |
|---|---|---|---|
| 1 | onfocus | script | element gets focus on object when script tobe run. |
| 2 | onblur | script | element lose the focus on object when scrip tobe run. |
| 3 | onabort | script | element gets aborted on object when script tobe run. |
| 4 | onchange | script | element gets anytime change on object when script tobe run. |
| 5 | onbeforeunload | script | element gets unloaded on object when scrip tobe run. |
| 6 | onclick | script | clicked on object when script tobe run. |
| 7 | ondblclick | script | double click on object when script tobe run. |
| 8 | onkeydown | script | key is pressed when script tobe run. |
| 9 | onkeypress | script | key is pressed over element then released when script tobe run. |
| 10 | onkeyup | script | key is released over element when script tobe run. |
| 11 | onmousedown | script | mouse button was pressed over an element when script tobe run. |
| 12 | onmouseout | script | mouse pointer release over an element when script tobe run. |
| 13 | onmousemove | script | run mouse pointer moved when script tobe run. |
| 14 | onmouseover | script | run mouse pointer move over when script tobe run. |
| 15 | onmouseup | script | mouse button is released when script tobe run. |
| 16 | onreset | script | form has been reset when script tobe run. |
| 17 | onselect | script | Select some content when script tobe run. |
| 18 | onsubmit | script | form has been submitted when script tobe run. |
| 19 | onload | script | object has load when script tobe run. |
| 20 | onchange | script | allow to change the object when script tobe run. |
| 21 | onunload | script | unload to the browser window when script tobe run. |
| 22 | ondrag | script | element being dragged when script tobe run. |
| 23 | ondragend | script | element being stop dragged when script tobe run. |
| 24 | ondragenter | script | element being go target dragged when script tobe run. |
| 25 | ondragleave | script | element being leave to target dragged when script tobe run. |
| 26 | ondragover | script | element being over to target dragged when script tobe run. |
| 27 | ondragstart | script | element being start dragged when script tobe run. |
| 28 | ondrop | script | element being dropped when script tobe run. |
| 29 | onerror | script | element error occurs when script tobe run. |
| 30 | onmessage | script | element message display when script tobe run. |
| 31 | onerror | script | element error occurs when script tobe run. |
| 32 | onmousewheel | script | mouse wheel will be rotate when script tobe run. |
| 33 | onscroll | script | scrollbar is scroll when script tobe run. |
| 34 | onresize | script | element should be resize when script tobe run. |
| 35 | onselect | script | all element content selected when script tobe run. |
| 36 | onstorage | script | element should be store in target when script tobe run. |
HTML beginners tutorial !!!
Click to Learn More about – HTML Tutorial for beginners
Browser Compatibility
| Sno | Browser | Support |
| 1 | Chrome | Yes |
| 2 | Firefox | Yes |
| 3 | Edge | Yes |
| 4 | Opera | Yes |
| 5 | Safari | Yes |
| 6 | Internet Explorer | Yes |