Introduction to HTML Canvas Graphics, with Usage and Examples

HTML: Hypertext Markup Language (Canvas Graphics)

The HTML <canvas> element is used to draw graphics on a web page.

The graphic to the left is made with <canvas>. It displays four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.

{tocify} $title={Table of Contents}

Till now, there was no mechanism to create Graphics and Animations on Web Pages. Technologies like Flash and Silverlight have been used for this.

But now, due to HTML5, Web Developers can create Graphics and Animations Directly on Webpages.

HTML5's <canvas> tag is used to design graphics on the web page. The <canvas> element only serves as a container for graphics.

In this, you use Scripting Language to draw Graphics. Javascript is mainly used with it.

Canvas is considered a different technology. With these friends, you have to apply different methods to draw different types of Graphics. These methods are accessed through the Context of both the Canvas.

Canvas Element is an Element that defines HTML Code using Width and Height Attributes.

However, the Canvas element's real power is accomplished by taking advantage of the HTML5 Canvas API.

The API is used by writing JavaScript that can access the canvas area through drawing functions, thus allowing for dynamically generated graphics.

The <canvas> element does not have drawing capabilities; rather, it is a container for JavaScript so that users can draw shapes and text in the browser with nothing required from the server.

You can draw 2D Graphics and set colors in a Rectangular Bitmap Canvas.

Syntax of HTML <canvas> Tag

<canvas id="canvas-id" width="int-number" height="int-number">

Syntax of HTML Canvas Tag

</canvas>{codeBox}

Friends, in the Syntax given above, you can see how Id, Height, Width, and Attributes have been defined in the well-specified Canvas Tag.

Friends, whenever you describe an <canvas> element, it is necessary to define these attributes.

In these Attributes, the Id Attribute is used by Javascript to get the context of <canvas>, and the width and height Attributes define the height and width of the Canvas.

<canvas> Tag is closed with </canvas> Ending Tag. Is.

Example of HTML <canvas> Tag

Below is an example of drawing a Rectangle by <canvas> Element.

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">

<title>HTML Canvas Example</title>

<style>
#canvasDiv {
border: 2px #82d502 solid;
}
</style>
</head>

<body>
<h2>HTML5 Canvas Example</h2>

<script type="text/javascript">
var canvas = document.getElementById("canvasDiv");
if(canvas.getContext) {
var ctx = canvas.getContext('2d');
// code for drawing goes here
} else {
// canvas unsupported code goes here
}
</script>

<canvas id="canvasDiv" width="200" height="200"></canvas>

</body>
</html>{codeBox}

Output:

Canvas Drawing Rectangle

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">
<title>Canvas Drawing Rectangles Example</title>

<style>
#bodyCanvas {
width: 400px;
height: 200px;
margin: 0px auto;
}
</style>

<script type="text/javascript">
function drawRectangle() {
var canvas = document.getElementById('canvasDiv');
if(canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(30, 30, 120, 120);
ctx.clearRect(50, 50, 80, 80);
ctx.strokeRect(55, 55, 70, 70);
} else {
alert('You need Safari or Firefox 1.5+ to see this example.');
}
}
</script>
</head>

<body id="bodyCanvas" onload="drawRectangle();">

<h2>Canvas Drawing Rectangles Example</h2>

<canvas id="canvasDiv"></canvas>

</body>
</html>{codeBox}

Output:

Canvas Drawing Paths

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">

<title>Canvas Drawing Paths Example</title>

<style>
#bodyCanvas {
width: 500px;
height: 200px;
margin: 0px auto;
}
</style>

<script type="text/javascript">
function drawPaths() {
var canvas = document.getElementById('canvasDiv');
if(canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
ctx.stroke();
} else {
alert('You need Safari or Firefox 1.5+ to see this example.');
}
}
</script>
</head>

<body id="bodyCanvas" onload="drawPaths();">

<h2>Canvas Drawing Paths Example</h2>

<canvas id="canvasDiv"></canvas>

</body>
</html>{codeBox}

Output:

Canvas Drawing Lines

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">

<title>Canvas Drawing Lines Example</title>

<style>
#bodyCanvas {
width: 500px;
height: 200px;
margin: 0px auto;
}
</style>

<script type="text/javascript">
function drawLines() {
var canvas = document.getElementById('canvasDiv');
if(canvas.getContext) {
var ctx = canvas.getContext('2d');
// Filled triangle
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(125, 25);
ctx.lineTo(25, 125);
ctx.fill();
// Stroked triangle
ctx.beginPath();
ctx.moveTo(145, 145);
ctx.lineTo(145, 45);
ctx.lineTo(45, 145);
ctx.closePath();
ctx.stroke();
// Straight Line
ctx.beginPath();
ctx.moveTo(285, 45);
ctx.lineTo(185, 45);
ctx.closePath();
ctx.stroke();
} else {
alert('You need Safari or Firefox 1.5+ to see this example.');
}
}
</script>

</head>

<body id="bodyCanvas" onload="drawLines();">

<h2>Canvas Drawing Lines Example</h2>

<canvas id="canvasDiv"></canvas>

</body>
</html>{codeBox}

Output:

Canvas Draw a Circle

Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>{codeBox}

Canvas Draw a Text

Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>{codeBox}

Canvas Draw a Stroke Text

Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>{codeBox}

Canvas Draw Linear Gradient

Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>{codeBox}

Canvas Draw Circular Gradient

Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>{codeBox}

Canvas Draw Image

<!DOCTYPE html>
<html>

<body>
<p>Image to use:</p>

<img id="scream" src="use-your-image.jpg" alt="The image" width="220" height="277">

<p>Canvas to fill:</p>

<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"></canvas>

<p><button onclick="myCanvas()">Try it</button></p>

<script>
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
}
</script>

</body>
</html>{codeBox}

Note: save the above code and run it on your browser to get the output. As well as use your image to make the code work.

Conclusion:

Friends, according to my expertise, I have written complete information to help you with “HTML Canvas Graphics.” If this post is favourable for you or not, please tell me by commenting.

If you liked this post, do not forget to share it with your friends so they can get information about it.

You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.

Please tell us through the comment section if you think we miss anything.

Introduction to HTML Canvas Graphics, with Usage and Examples