HTML Canvas

 HTML Canvas

HTML5 provides a <canvas> element that allows web developers to create dynamic graphics and animations using JavaScript. The <canvas> element provides a 2D drawing context that can be used to draw lines, shapes, text, and images.

Here's an example of drawing a simple circle on a canvas:

html

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

<script>

var canvas = document.getElementById("mycanvas");

var context = canvas.getContext("2d");

context.beginPath();

context.arc(100, 100, 50, 0,

2 * Math.PI);

context.stroke();

</script>

In this example, a canvas element with a width and height of 200 pixels is created. The `getContext()` method is used to retrieve the 2D drawing context of the canvas. The `beginPath()` method is called to start a new path, and the `arc()` method is used to draw a circle with a center point of (100,100), a radius of 50 pixels, and a starting angle of 0 and ending angle of 2π radians (a full circle). Finally, the `stroke()` method is called to stroke the circle.

The `<canvas>` element can also be used to create animations by repeatedly drawing and updating the canvas content.