SOURCE

function draw() {
    const canvas = document.querySelector('canvas')
    const ctx = canvas.getContext('2d')

    ctx.beginPath()
    ctx.moveTo(50, 50)
    ctx.lineTo(50, 100)
    ctx.lineTo(100, 100)
    ctx.lineTo(50, 50)
    ctx.fillStyle = 'rgb(300, 0, 0)'
    ctx.fill()
    ctx.closePath()

    ctx.beginPath()
    ctx.moveTo(60, 60)
    ctx.lineTo(60, 110)
    ctx.lineTo(110, 110)
    ctx.lineTo(60, 60)
    ctx.fillStyle = 'rgb(100, 0, 0)'
    ctx.fill()

    ctx.beginPath()
    ctx.moveTo(100, 100)
    ctx.arc(100, 100, 20, 0, Math.PI / 2, false)
    ctx.lineTo(100, 100)
    ctx.strokeStyle = 'rgb(0, 100, 0)'
    ctx.stroke()
    ctx.closePath()

    ctx.beginPath()
    ctx.rect(40, 40, 30, 30)
    ctx.fillStyle = 'rgb(200, 200, 200)'
    ctx.fill()

    const rect = new Path2D()
    rect.rect(100, 100, 10, 10)
    
    ctx.stroke(rect)
}

draw()

<canvas width="150" height="150">

</canvas>

canvas{
    border: 1px solid black
}