HTML Canvas Tag

The HTML canvas element provides HTML a bitmapped surface to work with. It is used to draw graphics on the web page.

The HTML 5 <canvas> tag is used to draw graphics using scripting language like JavaScript.

The <canvas> element is only a container for graphics, you must need a scripting language to draw the graphics. The <canvas> element allows for dynamic and scriptable rendering of 2D shapes and bitmap images.

It is a low level, procedural model that updates a bitmap and does not have a built-in scene. There are several methods in canvas to draw paths, boxes, circles, text and add images.

How to create a HTML canvas?

A canvas is a rectangle like area on an HTML page. It is specified with canvas element. By default, the <canvas> element has no border and no content, it is like a container.

<canvas id = "mycanvas" width ="200" height ="100"> </canvas>

HTML 5 Canvas Tag Example

<canvas id="myCanvas1" width="300" height="100" style="border:2px solid;">
Your browser does not support the HTML5 canvas tag.
</canvas>

Output:

Note: It is always necessary to specify the id attribute and the height & width attribute to define the size of the canvas. You can have multiple canvas elements on one HTML page.

Supporting Browsers

Element	Chrome	IE	Firefox	Opera	Safari
<canvas>	Yes	Yes	Yes	Yes	Yes

HTML Canvas Tag with JavaScript

A canvas is a two dimensional grid.

Coordinates (0,0) defines the upper left corner of the canvas. The parameters (0,0,200,100) is used for fillRect() method. This parameter will fill the rectangle start with the upper-left corner (0,0) and draw a 200 * 100 rectangle.

<canvas id="myCanvas" width="250" height="150" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,200,100);
</script>

Output:

Drawing Line on Canvas

If you want to draw a straight line on the canvas, you can use the following two methods.

moveTo(x,y): It is used to define the starting point of the line.

lineTo(x,y): It is used to define the ending point of the line.

If you draw a line which starting point is (0,0) and the end point is (200,100), use the stroke method to draw the line.

<canvas id="myCanvasLine" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasLine");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

Output:

Drawing Circle on Canvas

If you want to draw a circle on the canvas, you can use the arc() method:

arc(x, y, r, start, stop) 

To sketch circle on HTML canvas, use one of the ink() methods, like stroke() or fill().

<canvas id="myCanvasCircle" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasCircle");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

Output:

Drawing text on canvas

There are property and methods used for drawing text on the canvas.

font property: It is used to define the font property for the text.

fillText(text,x,y) method: It is used to draw filled text on the canvas. It looks like bold font.

strokeText(text,x,y) method: It is also used to draw text on the canvas, but the text is unfilled.

Let's see fillText() method example.

<canvas id="myCanvasText1" width="300" height="100" style="border:1px solid #d3d3d3;">
Sorry! Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasText1");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello JavaTpoint",10,50);
</script>

Output:

Let's see strokeText() method example.

<canvas id="myCanvasText2" width="300" height="100" style="border:1px solid #d3d3d3;">
 Sorry!Upgrade your browser. It does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasText2");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello JavaTpoint",10,50);
</script>

Output: