V2 | Notion

What is the Canvas?

An HTML element (<canvas>) that allows for dynamic, scriptable rendering of 2D shapes and bitmap images.
Commonly used for creating graphs, game graphics, animations, and image compositions.

Setting up the Canvas

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Canvas Basics</title>
    <style>
      canvas {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="400"></canvas>
    <script src="index.js"></script>
  </body>
</html>

width and height can be controlled via attributes or CSS.
The default size is 300 x 150 if not specified.

Drawing Context

The Canvas element alone cannot do anything. We must get a 2D drawing context from it in JavaScript:
```
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
```
What is context here?

Basic Drawing Shapes

Rectangles

fillRect(x, y, width, height) - draws a filled rectangle.