Na realidade não é bem uma dúvida, e sim uma implementação que eu acabei fazendo.
Implementei uma alteração de tamanho atrabés do scroll do mouse e a simulação de ir desenhando com o clique pressionado.
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
var cores = ["blue","red","green","black","white","grey"];
var indiceCorAtual = 0;
var tamanhos = [2,4,6,8,10,16,24,30]
var indiceTamAtual = 4;
var isDown = false;
function desenhaCirculo(evento, cor) {
if (!isDown) {
return;
}
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = cores[indiceCorAtual];
pincel.beginPath();
pincel.arc(x, y, tamanhos[indiceTamAtual], 0, 2 * 3.14);
pincel.fill();
console.log(tamanhos[indiceTamAtual]);
}
tela.onmousemove = desenhaCirculo;
tela.onmousedown = function (e) {
e.preventDefault();
e.stopPropagation();
isDown = true;
}
tela.onmouseup =function(e){
if (!isDown) {
return;
}
e.preventDefault();
e.stopPropagation();
isDown = false;
}
function mudaCor() {
indiceCorAtual++
if(indiceCorAtual >= cores.length) {
indiceCorAtual = 0; // volta para a primeira cor, azul
}
return false;
}
// Retorna o clique do botão esquerdo do mouse
tela.oncontextmenu = mudaCor;
function mudaTamanho(event){
if(event.wheelDeltaY >= 0){
indiceTamAtual++;
}else{
indiceTamAtual--;
}
if(indiceTamAtual >= tamanhos.length){
indiceTamAtual = tamanhos.length-1;
}else if(indiceTamAtual <= 0){
indiceTamAtual = 0;
}
return false;
}
tela.onmousewheel = mudaTamanho;
</script>