DONT ADD ANYTHING HERE!

Code

JavaScript

    const canvas = document.getElementById("canvas_one")
    let ctx = canvas.getContext("2d")
    
// Blue Rectangle
    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 150, 100);

// Clear Area (Blue Rectangle)
    ctx.clearRect(20, 20, 40, 40)

// Red Rectangle
    ctx.strokeStyle = "red";
    ctx.strokeRect(240, 90, 50, 50)

HTML

    <canvas id="canvas_one"></canvas>

CSS

    canvas {
        background-color: lightgoldenrodyellow;
    }

Notes

  1. Default canvas dimensions are (x, y) = (300, 150)
  2. The upper-left corner of the canvas has the coordinates (x, y) = (0, 0)

Commands

  1. getContext('2d')
  2. fillStyle='color'
  3. fillRect(x, y, width, height)
  4. strokeRect(x, y, width,height)
  5. clearRect(x, y, width, height)

References