Buen dia.
Tengo una duda con el ejercicio Diseñado con el mouse. Decidi experimentar dandole al clic derecho la funcionalidad para limpiar la pantalla. Al parecer funciona, pero me queda un punto en pantalla que no se borra, adjunto mi codigo:
<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector('canvas');
var pincel = pantalla.getContext('2d');
var puedoDibujar = false;
var xRojo = 0;
var xVerde = 50;
var xAzul = 100;
var yCuadrados = 0;
var medidaCuadrados = 50;
var colorActual = "blue"
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
function dibujarCirculo(x, y, colorActual) {
if(puedoDibujar) {
pincel.fillStyle = colorActual;
pincel.beginPath();
pincel.arc(x, y, 5, 0, 2 * 3.14);
pincel.fill();
}
}
function habilitarDibujar() {
puedoDibujar = true;
}
function deshabilitarDibujar() {
puedoDibujar = false;
}
function puedeDibujar(xCoordenada, yCoordenada) {
if((xCoordenada >= 0 && (xCoordenada < (3*medidaCuadrados+5)) && (yCoordenada >=0 && yCoordenada < (medidaCuadrados+5)))) {
return false;
} else {
return true;
}
}
function capturaMovimiento(evento) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if(puedeDibujar(x, y)) {
dibujarCirculo(x, y, colorActual);
}
}
function dibujarCuadrado(x, y, medida, color) {
pincel.fillStyle = color;
pincel.fillRect(x, y, medida, medida);
pincel.fill();
}
function dibujarPaleta() {
dibujarCuadrado(xRojo, yCuadrados, medidaCuadrados, "red");
dibujarCuadrado(xVerde, yCuadrados, medidaCuadrados, "green");
dibujarCuadrado(xAzul, yCuadrados, medidaCuadrados, "blue");
}
function seleccionarColor(evento) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if(y > yCuadrados && y < (yCuadrados + medidaCuadrados)) {
if(x > xRojo && x < (xRojo + medidaCuadrados)) {
colorActual = "red";
} else if (x > xVerde && x < (xVerde + medidaCuadrados)) {
colorActual = "green";
} else if(x > xAzul && x < (xAzul + medidaCuadrados)) {
colorActual = "blue";
}
}
}
function clrScr() {
pincel.clearRect(0, 0, 600, 400);
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
dibujarPaleta();
return false;
}
pantalla.onclick = seleccionarColor;
pantalla.oncontextmenu = clrScr;
pantalla.onmousemove = capturaMovimiento;
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
dibujarPaleta();
</script>
Tendran alguna sugerencia para evitar que esto pase?
Saludos.