HTML Canvas

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:

<canvas id = "script"> Data..<canvas>

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:

<!-- HTML code to illustrate canvas tag -->
<!DOCTYPE html>
<html>
<head>
<title>canvas Tag</title>
</head>
<body>
<canvas id = "Tutorialandexample" height = "250" width = "250"
style = "border:1px solid black">
</canvas>
<script>
var c = document.getElementById("Tutorialandexample");
var cx = c.getContext("2d");
cx.beginPath();
cx.arc(150, 150, 90, 0, 2 * Math.PI);
cx.stroke();
</script >
</body>
</html>

Output:

Example no. 2 draw rectangle using Html.

<!DOCTYPE html> 
<html> 
<head> 
<title>canvas Tag</title> 
</head> 
<body> <!-- canvas Tag starts here --> 
<canvas id = "Tutorialandexample" width = "400" height = "150" style = "border:1px solid black"> </canvas> <!-- canvas Tag ends here --> 
</body> 
</html>

Output:

Example no.3:

<!-- HTML code to illustrate canvas tag --> 
<!DOCTYPE html> 
<html> 
<head> 
<title>canvas Tag</title> 
</head> 
<body> <!-- canvas tag starts here --> 
<canvas id = "Tutorialandexample" width = "300" height = "300" style = "border:1px solid black"> </canvas> <!-- canvas tag ends here --> 
<script> var c=document.getElementById("Tutorialandexample"); 
var cx = c.getContext("2d"); 
vargrd = cx.createRadialGradient(100,                              100, 5, 100, 100, 100); grd.addColorStop(0, "blue"); 
grd.addColorStop(1, "red"); 
cx.fillStyle = grd; 
cx.fillRect(0, 0, 300, 300); </script> 
</body> 
</html>

Output:

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:

<canvas id="CanvasLine" width="250" height="150" style="border:1px solid #d3d3d3;">

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

<script>
var c = document.getElementById("CanvasLine"); 
varcctx = c.getContext("2d"); 
ctx.moveTo(0,0); 
ctx.lineTo(150,50); 
ctx.stroke(); 
</script>

Output:

Draw colored box border

<body>
<canvas id="totn_canvas" width="225" height="225"></canvas>
<script>
var canvas = document.getElementById("totn_canvas");
varctx = canvas.getContext("2d");
ctx.fillStyle = "#4B6692";
ctx.fillRect(50, 50, 200, 200);
ctx.clearRect(90, 90, 120, 120);
ctx.strokeRect(100, 100, 100, 100);
</script>
</body>

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:

<canvas id="myCircle" width="400" height="200" style="border:1px solid #d3d5d3;">

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

<script>
var c =document.getElementById("myCircle");
varcctx = c.getContext("2d");
ctx.beginPath(); 
ctx.arc(200,70,60,0,1*Math.PI); 
ctx.stroke(); 
</script>

Output: