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




Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »

Latest Updates

PHP Introduction

How to Run a PHP program in Xampp?

How can I create a phpinfo.php page?

How to Define a Variable in PHP

PHP Echo and Print Statements

Working with PHP Operators

Understanding the PHP Data Types

How to Write Comments in PHP

How to Define a Constant in PHP

PHP if...else...elseif Statements