The Canvas API in JavaScript allows us to draw graphics via scripting in HTML. To use the Canvas API, follow the steps below. 1. First, you need to have a canvas element in your HTML. ``` ``` 1. Now you can access this canvas using JavaScript. ``` var canvas = document.getElementById(‘myCanvas’); ``` 1. To draw anything on the canvas, you need to get its context first. Here, we are getting a 2D context. ``` var ctx = canvas.getContext(‘2d’); ``` 1. Now you can draw shapes, lines, text, etc., using this context. Let’s draw a simple rectangle. ``` ctx.fillStyle = ‘red’; // for specifying the color of the fill ctx.fillRect(50, 50, 100, 50); // this will draw a rectangle ``` In the fillRect function, the first two parameters are the x and y coordinates of the top left point of the rectangle and the last two parameters are the width and height of the rectangle. 1. You can also draw a line using the following code. ``` ctx.beginPath(); ctx.moveTo(50, 50); // starting point of the line ctx.lineTo(200, 50); // ending point of the line ctx.stroke(); ``` 1. To draw a circle, use the arc method. ``` ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); // parameters are x, y, radius, startAngle, endAngle ctx.stroke(); ``` 1. And finally, to clear a canvas, you can use the clearRect method. ``` ctx.clearRect(0, 0, canvas.width, canvas.height); ``` It’s important to note that the (0,0) coordinate in the canvas is the top left corner. As you move down, the y-coordinate increases, and as you move towards the right, the x-coordinate increases.
