Cambio de color y circunferencia del circulo

var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");    
pincel.fillStyle = "grey";
pincel.fillRect(0,0,600,400); 
var colores = ["blue", "red", "green"];
var indiceColorActual = 0; // comienza con blue
var circunferencias = [10,20,30,40,50]; //contiene el tamaño de las circunferencias
let circactual = 0; //comienza en 10

function dibujarCirculo(evento){
    var x = evento.pageX - pantalla.offsetLeft;
    var y = evento.pageY - pantalla.offsetTop;    
    pincel.fillStyle = colores[indiceColorActual];
    pincel.beginPath();
    pincel.arc(x,y,circunferencias[circactual],0,2*3.14);
    pincel.fill();
    console.log(x + "," + y);        
}

pantalla.onclick = dibujarCirculo;

function alterarColor() {
    indiceColorActual++;
    if(indiceColorActual>= colores.length) {
         indiceColorActual = 0; //vuelve para el primer color, blue
    }
    return false; //menú contextual padrón de `canvas` no sea exhibido
}

function alterarCircunferencia() {
    circactual++;
    if(circactual>= circunferencias.length) {
        circactual = 0; //la circunferencia vuelve  a ser 10
    }
    return false; //menú contextual padrón de `canvas` no sea exhibido
}

pantalla.oncontextmenu = alterarColor;
pantalla.onwheel = alterarCircunferencia; //aumenta la circunferencia con la rueda del mouse