Buenas, Tengo una duda. Es con la función de habilitar dibujo, y es que al mantener el mouse y sacarlo afuera de la pantalla de dibujo e ingresar, este mantiene "puedoDibujar = true" hasta que haga clic de nuevo. Ahí paso como hice mi código para saber si tendría que cambiar algo. Desde ya, gracias.
<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);
//Variables inciales
var colores = ["red","green","blue","yellow"];
var nombreColores = ["rojo","verde","azul","amarillo"]
var puedoDibujar = false;
var color = colores[0];
var tamanhoCuadrados = 50;
//Función para dibujar cada uno de los cuadrados de la paleta
function crearPaletaColores (colores){
var lugarX = 0;
for (var i = 0; i < colores.length; i++) {
pincel.fillStyle = colores[i];
pincel.fillRect(lugarX,0,tamanhoCuadrados,tamanhoCuadrados);
lugarX = lugarX + tamanhoCuadrados;
}
}
//Función para cambiar de color al clickear en la paleta
function cambiarColor(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
for (var i = 0; i < colores.length; i++) {
if ((x > i*tamanhoCuadrados )&&
(x < (i+1)*tamanhoCuadrados)&&
(y > 0)&&
(y < tamanhoCuadrados)){
return color = colores[i];
}
}
}
//Función para crear la linea con circulos consecutivos
function dibujarCirculo(evento) {
if(puedoDibujar) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x, y, 5, 0, 2 * Math.PI);
pincel.fill();
}
}
//Función para delimitar la pantalla a dibujar
function poderDibujar (evento) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if ((x > -5)&&
(x < (tamanhoCuadrados*colores.length)+5)&&
(y > -5)&&
(y < tamanhoCuadrados+5)) {
return false;
} else {
dibujarCirculo(evento);
}
}
//Funciónes para habilitar o no el lienzo
function habilitarDibujar() {
puedoDibujar = true;
}
function deshabilitarDibujar() {
puedoDibujar = false;
}
crearPaletaColores(colores);
//Las acciones del mouse
pantalla.onmousemove = poderDibujar;
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
pantalla.onclick = cambiarColor;
</script>