Please note, this is a STATIC archive of website technosmarter.com from July 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
 
  1. Techno

HTML Canvas | HTML5 canvas drawing example


HTML 5 included canvas to draw the graphics on the webpage. Canvas is not a part of HTML 4.0.The main concept of Canvas to draw the various type of graphics elements.

All graphics are drawn inside the curve block.

What is a canvas in HTML?
HTML Canvas is used to the graphics on the webpage with the help of javascript.Canvas works as a container in which we can draw the various type of graphics.
The canvas tag contains the four elements rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.

HTML Canvas

 
Please note, this is a STATIC archive of website technosmarter.com from July 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
With the help of canvas, we can draw the boxes, circles, text, and adding images.
The following example of a canvas in which we will draw the rectangle.

HTML Canvas


<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas  </title>
</head>
<body>

Check the error if the rectangle is not shown on browser otherwise your browser 
Is not support canvas 

</body>
</html>
Run

1. In the above example, we declared the canvas and canvas id because we used the id for the javascript call but there is no need to use it.

2. Height and width of the canvas.

3. Specified the border pixel and color.

4. If the rectangle is not displayed on the page then check your HTML code and try again. After that, if again rectangle is not displayed it means your browser is not supported canvas.

Draw Line

Draw line upper corner to down corner using canvas and javascript. To draw a line in the rectangle we use the coordinate of rectangle .

Line depends on java script where to draw inside the rectangle.
The following example will show you a line inside the rectangle .

HTML Canvas


<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas  </title>
</head>
<body>

Your browser does not support the HTML5 canvas tag.




</body>
</html>
Run

In above example, we have x and y coordinates to draw the lines.
1. Canvas height and width is set to height 300 and width- 200

2. Border 2 px and border color set to solid black.

3. In the javascript, we defined a variable ctx and given an id canvas.

4. We used the id inside HTML code.

5. ctx.moveTo(0,0) The initial coordinate x=0 and y=0;

6. ctx.lineTo(300,400)

From where the position to draw a line.

X=300,and y=400;

Draw a text effect

With the help of canvas and java script, we can draw the text effects.
The following example will display a text effect.


HTML Canvas 


<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas  </title>
</head>
<body>






</body>
</html>
Run

Gradient color effect -

Canvas helps to draw the gradient effects on the web page. The following example of the gradient using javascript and canvas.

HTML Canvas 


<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas  </title>
</head>
<body>






</body>
</html>
Run

Please Share

Recommended Posts:-