HTML <canvas> Tag
To draw graphics on a web page, the HTML 5 <canvas> tag is used which is a low-level, procedural model. Using a scripting language like JavaScript, it draws graphics and provides HTML with a bitmapped surface to work with. It acts as a container for graphics. A scripting language is needed to draw the graphics. Dynamic and scriptable rendering of 2D shapes and bitmap images are allowed by the HTML 5 <canvas> tag. It updates a bitmap. It does not have a built-in scene. Different methods can be used in the <canvas> tag for drawing paths, boxes, circles, text, and adding images.
To create an HTML canvas:
In HTML, the canvas can be understood as a rectangle-shaped area that is defined with the canvas element. With no default border and no default content, the HTML <canvas> element is much like a container. A single HTML page can hold multiple canvas elements but specifying the ID and the height & width attribute is a must to define the size of the canvas.
Syntax:
<canvas id = "example" width ="100" height ="50"> </canvas>
Example:
<!DOCTYPE html> <html> <body> <canvas id="rectangle" width="200" height="100" style="border:5px solid; color:crimson;"> </canvas> </body> </html>
Explanation:
In the above example, we are creating an HTML canvas with a width of 200 pixels and a height of 100 pixels.
HTML Canvas Tag with JavaScript:
Being a two-dimensional grid, for a canvas in HTML, the coordinates (0,0) define the upper left corner of the canvas.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="square"></canvas>
<script>
var c = document.getElementById("square");
var ctx = c.getContext("2d");
ctx.fillStyle = "crimson";
ctx.fillRect(0, 0, 120, 120);
</script>
</body>
</html>
Explanation:
In the above example, the fillRect() method is provided with the parameters (0, 0, 120, 120) and is used to fill the canvas starting from the upper-left corner (0,0) and to draw a 120 * 120 square.
Drawing Line on Canvas:
There are two methods to draw a straight line on the canvas.
moveTo(x,y):
Uses: To specify the starting point of the line.
lineTo(x,y):
Uses: To specify the ending point of the line.
Example: To draw a line with a starting point and the endpoint.
<!DOCTYPE html>
<html>
<body>
<canvas id="line" width="200" height="100" style="border:3px solid crimson;"></canvas>
<script>
var a = document.getElementById("line");
var ctx = a.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
Explanation:
In the above example, we draw a line diagonally on a canvas starting from (0,0) and ending at (200, 100).
Drawing Circle on Canvas:
The arc() method is used to draw a circle on the HTML canvas.
Syntax:
arc(x, y, r, start, stop)
Example: To sketch a circle on an HTML canvas.
<!DOCTYPE html>
<html>
<body>
<canvas id="circle" width="200" height="100" style="border:3px solid crimson;"></canvas>
<script>
var c1 = document.getElementById("circle");
var ctx = c1.getContext("2d");
ctx.beginPath();
ctx.arc(50,50,50,0,2*Math.PI);
ctx.stroke();
var c2 = document.getElementById("circle");
var ctx = c2.getContext("2d");
ctx.beginPath();
ctx.arc(150,50,50,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
Explanation:
In the above example, we are drawing two circles on a canvas of radius 50 pixels, but with centers at (50, 50) and at (150, 50).
Drawing text on canvas:
For drawing text on an HTML canvas., different properties and methods are used.
font property:
Uses: To specify the font property for the text.
fillText(text,x,y) method:
Uses: For drawing filled text on the canvas, thus looks like a bold font.
strokeText(text,x,y) method:
Uses: For drawing unfilled text on the canvas.
Example.: Example of fillText() method.
<!DOCTYPE html>
<html>
<body>
<canvas id="text" width="200" height="100" style="border:5px solid crimson;"></canvas>
<script>
var c1 = document.getElementById("text");
var ctx = c1.getContext("2d");
ctx.font = "18px Arial";
ctx.fillText("HELLO WORLD!!",50,60);
</script>
</body>
</html>
Explanation:
In the above example, we are drawing a filled text on the canvas using the fillText() method.
Example: Example of the strokeText() method.
<!DOCTYPE html>
<html>
<body>
<canvas id="text" width="200" height="100" style="border:5px solid crimson;"></canvas>
<script>
var c1 = document.getElementById("text");
var ctx = c1.getContext("2d");
ctx.font = "25px Arial";
ctx.strokeText("HELLO WORLD!!",2,60);
</script>
</body>
</html>
Explanation:
In the above example, we are drawing an unfilled text on the canvas using the strokeText() method.
Supporting Browsers:
Chrome, IE, Firefox, Opera, and Safari.