How to Draw on Screen with HTML and JavaScript?

Estimated read time 2 min read

Drawing on the screen with HTML and JavaScript can be done using the HTML5 canvas element and JavaScript. The canvas element provides a surface for drawing graphics using JavaScript.

Here’s an example of how to draw a rectangle on the screen:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
      let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext("2d");
      ctx.fillRect(100, 100, 300, 200);
    </script>
  </body>
</html>

In this example, we create a canvas element with a width and height of 500 pixels. We then use JavaScript to select the canvas element and retrieve its 2D rendering context, which we use to draw graphics on the canvas.

The fillRect method of the 2D rendering context is used to draw a filled rectangle on the canvas. The four arguments to fillRect specify the x and y position of the rectangle, as well as its width and height.

Note that this is just a simple example of what you can do with the canvas element and JavaScript. The canvas element provides a powerful platform for drawing graphics and creating interactive applications.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply