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-

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:

Your browser does not support the HTML canvas tag.

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

Your browser does not support the HTML canvas tag.

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

Your browser does not support the HTML canvas tag.

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

Your browser does not support the HTML canvas tag.

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

Your browser does not support the HTML canvas tag.

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

Your browser does not support the HTML canvas tag.

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

Your browser does not support the HTML canvas tag.

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.


0 Comments

Leave a Reply

Avatar placeholder