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


<!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>

Output

HTML Canvas Tag Examples

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.

<!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>

Output

HTML Canvas Lineto Method Your browser does not support the HTML5 canvas tag.

Canvas arc() Method


<!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>

Output

HTML Canvas Arc Method Example Your browser does not support the HTML5 canvas tag.

Canvas fill() Method

The fill() method fills the current drawing with color. The default color is black.


<!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>

Output

HTML Canvas fil() Method Examples Your browser does not support the HTML5 canvas tag.

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.

<!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>

Output

HTML Canvas Font Property Example Your browser does not support the HTML5 canvas tag.

HTML Canvas fillStyle() Property


<!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>

Output

HTML Canvas fillstyle() Property Example Your browser does not support the HTML5 canvas tag.

Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<canvas>
Yes
Yes
Yes
Yes
Yes











Follow Us: