Add Clear button to canvas

Question

I've been having a hard time adding a clear canvas button. I'm trying to build a simple canvas where the user can draw and download the images they've made. I don't know a lot about javascript (nor html and css to be honest) and have looked into similar questions and tried different solutions but just can't seem to get it to work? Can anyone help out?

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

You need to add an other event listener and use the method ctx.clearRect(); The clear rect should be as big as your canvas.

Maybe you couldn't do it because your button was underneath the canvas thus unclickable.

 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>