Fue muy difícil de pensar, la verdad. Pero, parece que funciona... Se los comparto a continuación:
<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector('canvas');
var pincel = pantalla.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
pincel.fillStyle="red"
pincel.fillRect(0,0, 50, 50);
pincel.fillStyle="green"
pincel.fillRect(50,0, 50, 50);
pincel.fillStyle="blue"
pincel.fillRect(100,0,50, 50);
var puedoDibujar = false;
var colorActual="blue"
function dibujarCirculo(evento) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if(((x<600)&&(x>150)) ||((y<400) && (y>50))){
if(puedoDibujar) {
pincel.fillStyle = colorActual;
pincel.beginPath();
pincel.arc(x, y, 5, 0, 2 * Math.PI);
pincel.fill();
}
}
else{
if((x<=50) &&
(x>=0) &&
(y<=50) &&
(y>=0)){
colorActual="red"
}
if((x<=100) &&
(x>=50) &&
(y<=50) &&
(y>=0)){
colorActual="green"
}
if((x<=150) &&
(x>=100) &&
(y<=50) &&
(y>=0)){
colorActual="blue"
}
}
}
pantalla.onmousemove = dibujarCirculo;
function habilitarDibujar() {
puedoDibujar = true;
}
function deshabilitarDibujar() {
puedoDibujar = false;
}
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
</script>Muchas gracias por leer :). Ojalá tenga sentido la lógica que usé. Saludos.
PD: Les dejo la obra de arte que realicé para probar jaja.
