Obrigado ao colega 'Julia Barboza da Silva' pela sua contribuição que me ajudou a entender e concluir esse desafio.
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas'); // trazendo a tela do canvas para o java script
var pincel = tela.getContext('2d'); // criando a variavel pincel e definindo sua forma de utilização dentro
// da variavel tela.
pincel.fillStyle = 'grey'; // Definindo o estilo da tela, a cor da tela, no caso,'cinza'.
pincel.fillRect(0, 0, 600, 400); // Definindo a área do retangulo, tamanho da tela que pelas coordenadas
// x e y, onde o x vai de 0 a 600 e o y de 0 a 400.
var desenha = false // Variável desenha false para invalidar evento e o mesmo somente acontecer quando
// a variável for 'true'.
tela.onmousemove = function(evento) { //chamada da funcao anonima pelo evento
if(desenha){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(x, y, 5, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
}
tela.onmousedown = function(){ // função anônima, pois não tem nome. função chamada diretamento pelo evento
desenha = true
}
tela.onmouseup = function(){ // função anônima, pois não tem nome. função chamada diretamento pelo evento
desenha = false
}
</script>
