Добавить кнопку Очистить на холст

Question

Мне было трудно добавить кнопку прозрачного холста.Я пытаюсь создать простой холст, где пользователь может рисовать и загружать сделанные ими изображения.Я не знаю много о javascript (ни html, ни css, если честно) и изучал похожие вопросы и пробовал разные решения, но просто не могу заставить его работать?Кто-нибудь может помочь?

Thank you so much in advance
Beatriz

    
        canvas {
            cursor: url(cursor.png), crosshair;
            border-top: 2px solid #000000;
            width: 100vw;
            height: 100vh;
          background-image: url(posters_v3.png);
          background-size: contain;
          margin: 0 0 85px 0;
        }
    
        input.button  {
    
        position:absolute;
    
        }
    
    

    
        <section class="canvas">
           
        <canvas id="canvas" style="position:absolute;border-top:2px solid;"></canvas>
            
            <div>
           <input type="button" id="clear" value="Clear">
            </div>
            
          
         <script>
            const canvas = document.querySelector('#canvas');
          // could be 3d
const ctx = canvas.getContext('2d');
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
    
          ctx.lineJoin = 'round';
          ctx.lineCap = 'round';
          ctx.lineWidth = 10;
          ctx.strokeStyle = '#000000';
    
          let isDrawing = false;
          let lastX = 0;
          let lastY = 0;
    
          function draw(e) {
            // stop the function if they are not mouse down
            if(!isDrawing) return;
            //listen for mouse move event
            console.log(e);
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.stroke();
            [lastX, lastY] = [e.offsetX, e.offsetY];
          }
    
          canvas.addEventListener('mousedown', (e) => {
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
          });
    
          canvas.addEventListener('mousemove', draw);
          canvas.addEventListener('mouseup', () => isDrawing = false);
          canvas.addEventListener('mouseout', () => isDrawing = false);
           



             </script>
    
    

Answer 1

Вам необходимо добавить другой прослушиватель событий и использовать метод ctx.clearRect ();Четкий прямоугольник должен быть таким же большим, как ваш холст.

Возможно, вы не смогли бы сделать это, потому что ваша кнопка находилась под холстом, поэтому ее нельзя было щелкнуть.

const canvas = document.querySelector('#canvas');
          // could be 3d
const ctx = canvas.getContext('2d');
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
    
          ctx.lineJoin = 'round';
          ctx.lineCap = 'round';
          ctx.lineWidth = 10;
          ctx.strokeStyle = '#000000';
    
          let isDrawing = false;
          let lastX = 0;
          let lastY = 0;
    
          function draw(e) {
            // stop the function if they are not mouse down
            if(!isDrawing) return;
            //listen for mouse move event
            //console.log(e);
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.stroke();
            [lastX, lastY] = [e.offsetX, e.offsetY];
          }
    
          canvas.addEventListener('mousedown', (e) => {
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
          });
    
          canvas.addEventListener('mousemove', draw);
          canvas.addEventListener('mouseup', () => isDrawing = false);
          canvas.addEventListener('mouseout', () => isDrawing = false);
           


_clear.addEventListener("click", ()=>{
  ctx.clearRect(0,0,canvas.width,canvas.height)
})

     <section class="canvas">
           
        <canvas id="canvas" style="border:2px solid; "></canvas>
            
            <div>
           <input type="button" id="_clear" value="Clear" style="position:absolute;top:0;left:0">
            </div>
</section>