HTML Canvas: Using JavaScript, the < canvas > tag in HTML is used for drawing graphics on web page. It can be used to draw routes, boxes, text, gradient, and picture adding. It does not include boundary and text by nature. The HTML canvas feature provides a bitmapped surface for HTML to work on. This is used for drawing web page graphics.

It is a low-level, procedural model which updates a bitmap and has no integrated scene. There are many techniques for drawing routes, lines, circles, text and inserting pictures in the canvas.

Syntax:

Attribute:The tag to the canvas contains two attributes listed below:

Height:Uses this attribute to set canvas height.

Width:Uses this attribute to set canvas width.

For Example:

Output:

HTML Canvas

Example no. 2 draw rectangle using Html.

Output:

HTML Canvas

Example no.3:

Output:

HTML Canvas

Drawing Line on Canvas

You can use the following two approaches if you want to draw a straight line on the canvas.

MovingTo(x, y): It determines the starting point of the row.

LineTo(x, y): It determines the end point of a line.

Using the stroke method, you can draw a line with starting point (0,0) and the end point (250,150).

Code:

Your browser does not support the HTML5 canvas tag.</canvas>

Output:

HTML Canvas

Draw colored box border

Output:

Drawing Circle on Canvas

You may use the arc () method to draw a circle on the canvas:     

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

Using one of the ink () methods, such as stroke () or fill () to draw circle on HTML canvas.

Code:

Your browser does not support the HTML5 canvas tag.</canvas>

Output:

HTML Canvas

Pin It on Pinterest

Share This