Existe uma boa prática para fazer desenhos no canva?

Boa Tarde Gleison, tudo bem?

A tela HTML é uma grade bidimensional. O canvas trabalha como um “gráfico x y” sobre o plano cartesiano. Só que o ponto x = 0 e y = 0 está no canto superior esquerdo. Estive pesquisando um jeito mais prático também e consegui chegar a essa solução. Basta abrir o console do navegador e ao clicar com o mouse na tela irá aparecer as coordenadas de x e y. Espero que ajude.

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    console.log("x: " + x + " y: " + y)
}

const canvas = document.querySelector('canvas')
canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e)
})

</script>

Olá Gleison ! No mundo javacript praticamente existem bibliotecas (códigos e funcionalidades prontas) pra tudo que você queira fazer, são muito utilizadas no desenvolvimento profissional. Não é interessante utilizar quando se estar aprendendo porque abstrai grande parte do código, então você conseguiria fazer vários desenhos com essa biblioteca e com muita facilidade mas não saberia exatamente o que estaria acontecendo por baixo dos panos.