Last Updated on April 26, 2023 by Roshan Parihar
HTML Canvas tag is used to show graphics in a web page by using with javascript.
A Canvas is just a container on which you can create 2D as well as 3D designs. You can create some animations on canvas.
Canvas is very useful when any company wants to create advertisements. We can create an attractive ad using the canvas tag.
We can create many 2D and 3D games in Canvas using with javascript.
Syntax
|
1 |
<canvas id="mygraphics" width="width in px" height="height in px"></canvas> |
|
1 |
<canvas id="mycanvas" width="200" height="200" style="border:1px solid #000;background:#ccc;"></canvas> |
Output
Drawing Lines on HTML Canvas
To draw a line using the HTML canvas we need to use four methods.
| Sr. No. | Method name | Description |
|---|---|---|
| 1 | beginPath() | It gives instructions to the browser to start the new path to canvas. |
| 2 | moveTo(x, y) | Used for canvas to set the starting point. |
| 3 | lineTo(x, y) | It gives instructions to the browser to start the new path to canvas. |
| 4 | stroke() | To make the line visible we use stroke (). It gives the default color black to line of drawing on canvas. |
|
1 2 3 4 5 6 7 8 |
<canvas id="myCanvas1" width="200" height="200" style="border:1px solid #000;"></canvas> <script> var mycanvas = document.getElementById("myCanvas1"); var canvas = mycanvas.getContext("2d"); canvas.moveTo(20,20); canvas.lineTo(200,200); canvas.stroke(); </script> |
Output
Drawing Rectangle on HTML Canvas
To draw a rectangle on the canvas we need to use four methods.
| Sr. No. | Method name | Description |
|---|---|---|
| 1 | fillRect(x, y, width, height) | Used to give and set the coordinates and dimensions of a rectangle on the canvas. |
| 2 | fillStyle | Used to give and set the fill color of rectangle. |
|
1 2 3 4 5 6 7 |
<canvas id="myCanvas2" width="300" height="200" style="border:1px solid #000;"></canvas> <script> var mycanvas = document.getElementById("myCanvas2"); var canvas = mycanvas.getContext("2d"); canvas.fillRect(20, 20, 180, 100); canvas.fillStyle = 'yellow'; </script> |
Output
Drawing Text on Canvas
To draw a text on canvas we need to use two methods.
| Sr. No. | Method name | Description |
|---|---|---|
| 1 | fillText(string, x, y) | Used to give string to show on canvas.The position of the string given by x and y. |
| 2 | font | Used to set the font size, font family and font style of text. |
|
1 2 3 4 5 6 7 |
<canvas id="myCanvas3" width="400" height="200" style="border:1px solid #000;"></canvas> <script> var mycanvas = document.getElementById("myCanvas2"); var canvas = mycanvas.getContext("2d"); canvas.font = 'italic 40pt Calibri, sans-serif'; canvas.fillText('Hello World!', 50, 50); </script> |
Output
Drawing Circle on Canvas
To draw a circle on the canvas we need to use three methods.
| Sr. No. | Method name | Description |
|---|---|---|
| 1 | beginPath() | It gives instructions to the browser to start the new path to canvas. |
| 2 | arc(x, y, r, start, stop) | Used to set the font size, font family and font style of text. |
| 3 | stroke() | To make the line visible we use stroke(). It gives the default color black to line of drawing on canvas. |
|
1 2 3 4 5 6 7 8 |
<canvas id="myCanvas4" width="400" height="200" style="border:1px solid #000;"></canvas> <script> var mycanvas = document.getElementById("myCanvas4"); var canvas = mycanvas.getContext("2d"); canvas.beginPath(); canvas.arc(95,50,40,0,2*Math.PI); canvas.stroke(); </script> |
Output
Resources and References
1. W3C Specification.
2. HTML living standard
3. W3C project using Github