Canvas HTML

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.