<canvas width="600" height="400"></canvas>
<script>
/*Trasladamos la pizarra canvas de HTML a JavaScript., le damos color y creamos nuestro pincel.*/
var pantalla = document.querySelector('canvas');
var pincel = pantalla.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
/*Definimos inicialmente la variable boolana puedoDibujar como false para que nuestro programa
no empiece a dibujar hasta que le demos la orden desde el mouse. (prueba con cambiarla a true y verás).
Esa variable será utilizada por la función dibujarCirculo para saber si debe o no diseñar.
Declaramos la variable colorElegidoPaleta como blue por defecto.*/
var puedoDibujar = false;
var colorElegidoPaleta = "blue";
/*La siguiente función nos diseñará un círculo. Para ello,tomará las coordenadas generadas por el
puntero del mouse. Descartamos los bordes izquierdo y superior de la página para limitar que dibujemos
solo en la pizarra.
PRIMERA ACLARACION IMPORTANTE: verificamos que dichas coordenadas no estén comprendidas dentro
del área de la paleta de colores con las cuatro condiciones dentro del if; si todas se cumplen "se ejecuta nada",
es decir, que no dibujará en esa zona de la pizarra donde se encuentra la paleta.
En cambio, si el cursor del mouse esta en cualquier otra región de la pizarra se ejecutará el else if donde
consultará la variable puedoDibujar (si el botón estaba siendo presionado será TRUE y continuará dibujando;
o no, si es FALSE).SEGUNDA ACLARACION IMPORTANTE: como el círculo tiene un radio de 5, me tomé el
atrevimiento de darle un margen de restricción de +5 en todo el borde de la paleta, porque por ejemplo si yo
paso el mouse por la coordenada 151 (que ya sería fuera de la zona de la paleta), el círculo que tiene radio
5 me pintará 4px dentro de dicha zona. (Prueba con poner 0, 150, 0 y 50 en ese orden y verás de lo que te hablo).
El cículo tomará el color que tenga en ese momento la variable colorElegidoPaleta (que por defecto es blue).*/
function dibujarCirculo(evento) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if ((x >= -5) && (x < 155) && (y >= -5) && (y < 55)) {
} else if (puedoDibujar) {
pincel.fillStyle = colorElegidoPaleta;
pincel.beginPath();
pincel.arc(x, y, 5, 0, 2 * 3.14);
pincel.fill();
}
}
/*Las siguientes dos funciones, le cambian el valor booleano a la variable puedoDibujar para habilitar o no tal tarea.*/
function habilitarDibujar() {
puedoDibujar = true;
}
function deshabilitarDibujar() {
puedoDibujar = false;
}
/*La próxima función crea cada cuadradito de nuestra paleta de colores. La misma recibe como
parámetros las coordenadas x e y, y el color de cada uno. El ancho y alto son datos fijados en el ejercicio (50px para c/u).*/
function crearCuadradosPaleta(x, y, tamanho, color) {
pincel.fillStyle=color;
pincel.fillRect(x, y, tamanho, tamanho);
}
/*Aquí, esta función llamará tres veces a la anterior para crear nuesta paleta con los tres colores
establecidos en el desafío. También se establecen las coordenadas iniciales x e y en el punto 0,0 de nuestra pizarra.
Como se desidió que la paleta esté puesta horizontalmente, las coordenas y son siempre la misma
para mantener dicha horizontalidad de los cuadraditos. Mientras que las x iniciales se irán desplazando de a valores de 50px (tamanhoCuadrados) para quedar una al lado de la otra.*/
function crearPaleta() {
var x=0;
var y=0;
var tamahoCuadrados=50;
crearCuadradosPaleta(x, y, tamahoCuadrados,"red");
crearCuadradosPaleta(x + tamahoCuadrados, y, tamahoCuadrados, "green");
crearCuadradosPaleta(x + tamahoCuadrados*2, y, tamahoCuadrados, "blue");
}
/*Nuestra última función se encargará de cambiar el color del pincel tomando eventos de puntero del mouse para determinar si sus coordenadas se encuentran dentro de la zona establecida para cada cuadradito de la paleta a través de los siguientes if, si uno de ellos se cumple cambia el color de la variable nombrada anteriormente.*/
function cambiarColor(evento) {
var xColorElegido = evento.pageX - pantalla.offsetLeft;
var yColorElegido = evento.pageY - pantalla.offsetTop;
if ((xColorElegido>=0) && (xColorElegido<50) && (yColorElegido >= 0) && (yColorElegido < 50)) {
colorElegidoPaleta="red";
}
if ((xColorElegido >= 50) && (xColorElegido < 100) && (yColorElegido >= 0) && (yColorElegido < 50)) {
colorElegidoPaleta = "green";
}
if ((xColorElegido >= 100) && (xColorElegido < 150) && (yColorElegido >= 0) && (yColorElegido < 50)) {
colorElegidoPaleta = "blue";
}
}
//Ejecutamos la función para que nuestra paleta esté siempre visible.
crearPaleta();
//CONTINUA ABAJO...
</script>
