The HTML <canvas> element is used to draw graphics on a website page.
A canvas_in HTML is an area where graphics can be drawn with JavaScript. The <canvas> tag creates the graphic container and JavaScript then, at that point draws ways, shapes, text, pictures, and so on inside this container.
The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.
In this tutorial, you will learn-
In this article, you will learn-
What is HTML_Canvas?
The HTML <canvas> element is used to draw graphics, on the fly, by means of JavaScript.
The <canvas> element is just a container for graphics. You should use JavaScript to actually draw the graphics.
Canvas has a few techniques for drawing ways, boxes, circles, text, and adding pictures.
Canvas Examples
A canvas is a rectangular area on a HTML_page. By default, a canvas has no border and no substance.
The markup resembles this:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Always determine an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute.
Here is an example of a basic, empty canvas:
Example
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
Add a JavaScript
Subsequent to creating the rectangular canvas area, you should add a JavaScript to do the drawing.
Here are a few examples:
Draw a Line
Example
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
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>
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>
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>
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>
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>
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
