Quiero borrar el dibujo hecho en canvas y conseguí una función que lo hace por google. Para ejecutar la función, creé un botón (como se m...

Mario Hidalgo

Pregunta

student•

Quiero borrar el dibujo hecho en canvas y conseguí una función que lo hace por google. Para ejecutar la función, creé un botón (como se muestra en el código). Si me borra el dibujo con éxito, pero me borra parte del recuadro que dibuje para reflejar el área de dibujo. Alguien me puede ayudar a resolver este problema?

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dibuja con tu mouse</title>
  </head>
  <body>
    <h1>Dibuja con tu mouse</h1>
    <canvas width="300" height="300" id="pizarra"></canvas>
    <br><input type="button" value="Volver a dibujar" id="clear"/>
    <script src="eventoMouse.js"></script>
  </body>
</html>

var n = document.getElementById("pizarra");
var hoja = n.getContext("2d");
var botonClear= document.getElementById("clear");
document.addEventListener("mousedown", presionarMouse);
document.addEventListener("mousemove", movimientoMouse);
document.addEventListener("mouseup", soltarMouse);
botonClear.addEventListener("click", dibujoClear);
var colorBorde = "red";
var x, y; //Para guardar las cordenadas del mouse en un momento especifico
var estadoMouse = 0; //Iniciador del estado del click del mouse

//dibujar borde para localizar la pizarra

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 3;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}

dibujarLinea(colorBorde, 0, 0, 300, 0, hoja);
dibujarLinea(colorBorde, 300, 0, 300, 300, hoja);
dibujarLinea(colorBorde, 0, 0, 0, 300, hoja);
dibujarLinea(colorBorde, 0, 300, 300, 300, hoja);

// Funcion que detecta las coordenadas donde sucedio el mousedown
function presionarMouse(evento)
{
  estadoMouse = 1; //Cuando el programa detecta el click del mouse
  x = evento.offsetX;
  y = evento.offsetY;
}

//Funcion que dibuja con el mousemove mientras mousedown
function movimientoMouse(evento)
{
  var colorDibujo = "blue";
  if(estadoMouse == 1)
  {
    dibujarLinea(colorDibujo, x, y, evento.offsetX, evento.offsetY, hoja);
    x = evento.offsetX;
    y = evento.offsetY;
  }
}

//Funcion que deja de dibujar cuando mouseup
function soltarMouse(evento)
{
  estadoMouse = 0;
  x = evento.offsetX;
  y = evento.offsetY;
}

//Fucion que borra el dibujo
function dibujoClear()
{
  hoja.clearRect(2, 2, 300, 300);
}

CRISTIAN BARBERO PÉREZ

student•

Hola, es por como funciona internamente la función. La función sirve para borrar un rectángulo dentro del canvas, aquí puedes ver como funciona.

Entonces si no quieres que te borre los bordes tendrás que borrar un rectángulo que vaya desde el pixel 2 hasta el 298, por tanto escribirlo así:

function dibujoClear()
{
  hoja.clearRect(2, 2, 296, 296);
}

Quiero borrar el dibujo hecho en canvas y conseguí una función que lo hace por google. Para ejecutar la función, creé un botón (como se m...

Curso Gratis de Programación Básica

Curso Gratis de Programación Básica