What Is HTML Canvas Graphics

HTML Canvas
HTML Canvas

The HTML Canvas component is utilized to draw illustrations on a page.

The realistic to one side is made with <canvas>It shows four components: a red square shape, an inclination square shape, a multicolor square shape, and a multicolor book.

What is HTML Canvas?

The HTML <canvas>component is utilized to draw designs, on the fly, by means of JavaScript.

The <canvas> component is just a holder for designs. You should utilize JavaScript to really draw the designs.

Material has a few techniques for drawing ways, boxes, circles, text, and adding pictures.

Browser Support

The numbers in the table specify the first browser version that fully supports the <canvas> element.

HTML Canvas

Canvas Examples

On an HTML page the area of a canvas is a rectangular . According to default, a canvas has no content and no border.

The markup looks like this:<canvas id=”myCanvas” width=”200″ height=”100″></canvas>

Note: Always determine an id characteristic (to be alluded to in a content), and a width and tallness quality to characterize the size of the material. To add a boundary, utilize the style characteristic.

Here is an illustration of an essential, void material:

HTML Canvas
Example

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #000000;”>
</canvas>

Add a JavaScript

After creating the rectangular canvas area, you must add a JavaScript to do the drawing.

Here are some examples:

Draw a Line
HTML Canvas
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

HTML Canvas
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

HTML Canvas
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

HTML Canvas
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

HTML Canvas
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

HTML Canvas
HTML Canvas
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>

Draw Image

<script>
var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
var img = document.getElementById(“scream”);
ctx.drawImage(img, 10, 10);
</script>