Depois que vi a solução foi que entendi as funções "onmousedown" e "onmouseup" e "onmousemove" e como utilizar elas. Realmente, esse foi bem mais difícil de entender.
<meta charset="UTF-8">
<canvas width = "600" height = "400"></canvas>
<button>eliminar</button>
<script>
var tela = document.querySelector("canvas");
var apagar = document.querySelector("button");
var pincel = tela.getContext("2d");
var cores = ["blue", "red", "green"];
var i = 0;
pincel.fillStyle = "grey";
pincel.fillRect(0, 0, 600, 400);
var desenha = false;
function habilitaDesenho(){
desenha = true;
}
function desabilitaDesenho(){
desenha = false;
}
function desenhaCirculo(evento){
if(desenha){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = cores[i];
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14);
pincel.fill();
console.log("Posição do clique " + "(" + x + "," + y + ")");
}
}
function mudaCor(){
i++;
if(i >= cores. length){
i = 0;
}
return false;
}
function apagaTudo(){
pincel.fillStyle = "grey";
pincel.fillRect(0, 0, 600, 400);
}
tela.onmousemove = desenhaCirculo;
tela.onmousedown = habilitaDesenho;
tela.onmouseup = desabilitaDesenho;
tela.onclick = desenhaCirculo;
tela.oncontextmenu = mudaCor;
apagar.onclick = apagaTudo;
</script>