2d

To draw 2D shapes in JavaScript, you can use the Canvas element and its associated CanvasRenderingContext2D object. The Canvas element is an HTML element that you can use to draw graphics using JavaScript. Here's an example of how you can use it to draw a rectangle:

<canvas id="canvas" width="200" height="100"></canvas>
<script>
 // get the canvas element and its context
 let canvas = document.getElementById('canvas');
 let ctx = canvas.getContext('2d');
 // draw a rectangle
 ctx.fillStyle = 'red';
 ctx.fillRect(10, 10, 180, 80);
</script>

This code will create a canvas element with the ID "canvas", and it will use the fillRect() method of the CanvasRenderingContext2D object to draw a filled rectangle with the color red. The rectangle will be positioned at (10, 10) and will have a width of 180 and a height of 80.

You can use the CanvasRenderingContext2D object to draw other shapes as well, such as circles and lines. Here's an example of how you can use it to draw a circle:

<canvas id="canvas" width="200" height="100"></canvas>
<script>
 // get the canvas element and its context
 let canvas = document.getElementById('canvas');
 let ctx = canvas.getContext('2d');
 // draw a circle
 ctx.beginPath();
 ctx.arc(100, 50, 40, 0, 2 * Math.PI);
 ctx.fillStyle = 'blue';
 ctx.fill();
</script>

This code will create a canvas element with the ID "canvas", and it will use the arc() method of the CanvasRenderingContext2D object to draw a filled circle with the color blue. The circle will be centered at (100, 50) and will have a radius of 40.