Demorei mas foi

Gente com certeza saber matematica sobre equivalências ajudaria muito em ocasião que a gente usa o JavaScript pra desenhar, porque olha kkk. Eu colocava o valor esperando uma coisa e saia outra nada haver.

<canvas width="600" height="500"></canvas>

<script>

    var tela = document.querySelector('canvas')
    var pincel = tela.getContext('2d')

      pincel.fillStyle = 'green'    
    pincel.fillRect(0, 0, 600, 500)

     pincel.fillStyle = 'black'    
    pincel.fillRect(85, 100, 170, 150)
     pincel.fillStyle = 'black'    
    pincel.fillRect(350, 100, 160, 150)
        pincel.fillStyle = 'black'    
    pincel.fillRect(253, 249, 100, 70)
     pincel.fillRect(200, 300, 200, 120);

    pincel.fillRect(150, 300, 75, 200);
    pincel.fillRect(390, 300, 75, 200);

</script>

E uma coisa que eu entendi é que na verdade esse "plano cartesiano" não é exatamente como eu pensava, porque na minha antiga compreensão colocava-se o valor começando em "x" e depois o valor onde você queria que terminasse, mas na verdade você determina o começo e o segundo valor são quantos pixels aquela linha vai ter. Por exemplo, começava do 2 e depois colocava 4 (2, y, 4,y). Eu pensava que iria andar do 2 até o 4, mas o que acontecia era "o valor começa do 2 e anda 4 espaços" ficando algo como (2, y, 6,y)