Home »
HTML »
HTML canvas
HTML canvas
The HTML canvas is used to draw graphics on the web page. The <canvas> tag is used to draw graphics by the help of scripting language like JavaScript. The <canvas> element is a container for graphics. There are several methods in canvas to draw paths, boxes, circles, text and add images.
HTML Canvas Tag
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Canvas Tag </title>
</head>
<body>
<canvas id="Canvas" width="300" height="100" style="border:1px solid;">
</canvas>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Canvas Tag </title>
</head>
<body>
<canvas id="Canvas" width="300" height="100" style="border:1px solid;">
</canvas>
</body>
</html>
Output
Note : It is always necessary to specify the id and the height & width attribute to define the size of the canvas.
Canvas lineTo() Method
The lineTo() method adds a new point and creates a line to that point from the last specified point in the canvas.
It does not draw the line but only creates a point. If you want to draw a straight line on the canvas, these three methods should be used accordingly.
- 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.
- stroke(): It is used to draw the line grom starting point to ending point.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Canvas Lineto Method </title>
</head>
<body>
<canvas id="Canvas" width="400" height="150" style="border:1px solid green;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(400, 150);
ctx.stroke();
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Canvas Lineto Method </title>
</head>
<body>
<canvas id="Canvas" width="400" height="150" style="border:1px solid green;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(400, 150);
ctx.stroke();
</script>
</body>
</html>
Output
Canvas arc() Method
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Canvas Arc Method </title>
</head>
<body>
<canvas id="Canvas" width="300" height="150" style="border:1px solid green;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Canvas Arc Method </title>
</head>
<body>
<canvas id="Canvas" width="300" height="150" style="border:1px solid green;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>
Output
Canvas fill() Method
The fill() method fills the current drawing with color. The default color is black.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Canvas fil() Method </title>
</head>
<body>
<canvas id="Canvas" width="300" height="150" style="border:1px solid blue">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "lightblue";
ctx.fill();
ctx.beginPath();
ctx.rect(40, 40, 150, 100);
ctx.fillStyle = "orange";
ctx.fill();
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Canvas fil() Method </title>
</head>
<body>
<canvas id="Canvas" width="300" height="150" style="border:1px solid blue">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "lightblue";
ctx.fill();
ctx.beginPath();
ctx.rect(40, 40, 150, 100);
ctx.fillStyle = "orange";
ctx.fill();
</script>
</body>
</html>
Output
Canvas font() Property
The font property sets or returns the current font properties for text content on the canvas.
- font property: It is used to define the font property(font face,font size) for the text.
- fillText(text,x,y) method: It is used show filled text on the canvas. It looks like bold font.
- strokeText(text,x,y) method: It is also used to show normal text on the canvas which is unfilled.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Canvas Font Property </title>
</head>
<body>
<canvas id="Canvas" width="300" height="150" style="border:1px solid gray">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello HTML 5!", 50, 80);
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Canvas Font Property </title>
</head>
<body>
<canvas id="Canvas" width="300" height="150" style="border:1px solid gray">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello HTML 5!", 50, 80);
</script>
</body>
</html>
Output
HTML Canvas fillStyle() Property
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Canvas fillstyle() Property Example </title>
</head>
<body>
<canvas id="Canvas" width="350" height="150" style="border:1px solid gray;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(20, 20, 150, 100);
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Canvas fillstyle() Property Example </title>
</head>
<body>
<canvas id="Canvas" width="350" height="150" style="border:1px solid gray;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(20, 20, 150, 100);
</script>
</body>
</html>
Output
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<canvas> |
Recommended :