# 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. In the <canvas> tag, different methods can be used 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 which 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>

Output:

#### Explanation:

In the above example, we are creating an HTML canvas of 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) defines 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>

Output:

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>

Output:

Explanation:

In the above example, we are drawing 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 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>

Output:

Explanation:

In the above example, we are drawing two circles on a canvas both of radius 50 pixels, but with centres 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>

Output:

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>

Output:

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.