Hola a todos, este desafío estuvo muy bueno. La idea es hacerlo de a poquito tal y como aconsejaron. Les dejo mi resolución por si a alguno le ayuda! Saludos.
<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
var colorActual = "blue";
var puedoDibujar = false;
function dibujarCuadrado (x,dx,color){
pincel.fillStyle = color;
pincel.fillRect(x,0,dx,50); //(PosIni x, posIniY, avanzax, AvanzaY)
pincel.strokeRect(x,0,dx,50);
}
function cambiarColor(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if (x<50 && y<50){
if (colorActual != "blue"){
console.log("Entro en IF != blue");
colorActual = "blue";
pincel.fillStyle = colorActual;
}
}
if (x >50 && x < 100 && y<50){
if (colorActual != "red"){
console.log("Entro en IF != red");
colorActual = "red";
pincel.fillStyle = colorActual;
}
}
if(x > 100 && x < 150 && y < 50) {
if (colorActual != "lightgreen"){
console.log("Entro en IF != green");
colorActual = "green";
pincel.fillStyle = colorActual;
}
}
}
function habilitarDibujar(evento){
puedoDibujar = true;
}
function deshabilitarDibujar(evento){
puedoDibujar = false;
}
function dentroPaleta (evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if (x < 155 && y < 55){
console.log("ESTOY Dentro DE LA PALETA Y DENTRO DEL CANVAS x: " + x + " y: " + y);
pantalla.onclick=cambiarColor;
return true;
}
else {
return false;
}
}
function dibujarCirculo(evento){
var dentro = dentroPaleta(evento)
if (puedoDibujar && dentro == false){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
pincel.beginPath();
pincel.arc(x,y,5,0,2*Math.PI);
pincel.fill();
}
}
//PROGRAMA PRINCIPAL
dibujarCuadrado(0,50,"blue");
dibujarCuadrado(50,50,"red");
dibujarCuadrado(100,50,"lightgreen");
pincel.strokeStyle = "black";
pincel.fillStyle = colorActual;
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
pantalla.onmousemove = dibujarCirculo;
/* onmousemove al pasar por el elemento interacciona
onmouseup Un botón del ratón se libera estando sobre un elemento
onmousedown Se pulsa un botón del ratón sobre un elemento
*/
</script>
