Issue with drawing over buttons in HTML5 Canvas

Question

 window.addEventListener("load", () => { const canvas = document.querySelector("#canvas"); const ctx = canvas.getContext("2d"); const color = document.querySelector("#color"); const strokeWeight = document.querySelector("#strokeWeight"); const eraser = document.querySelector('#eraser'); //variables const clearButton = document.querySelector("#clear"); let painting = false; function startPosition(e) { painting = true; draw(e); } function finishedPosition() { painting = false; ctx.beginPath(); } function draw(e) { if(e.which == 1) { ctx.lineCap = "round"; ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); ctx.beginPath(); ctx.moveTo(e.clientX, e.clientY); } else { finishedPosition(); } } function changeColor(e) { const color = e.target.value; ctx.strokeStyle = color; } function changeStrokeWeight(e) { const strokeWeight = e.target.value; ctx.lineWidth = strokeWeight; } function clickEraser() { ctx.strokeStyle = 'white'; } //Event listeners canvas.addEventListener("mousedown", startPosition); canvas.addEventListener("mouseup", finishedPosition); canvas.addEventListener("mousemove", draw); color.addEventListener("input", changeColor); strokeWeight.addEventListener("input", changeStrokeWeight); eraser.addEventListener("click", clickEraser); //Buttons clearButton.addEventListener("click", clearCanvas); function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); } }); window.addEventListener("resize", resizeCanvas); function resizeCanvas() { //Resizing canvas.height = window.innerHeight; canvas.width = window.innerWidth; } resizeCanvas();

 * { margin: 0; padding: 0; box-sizing: border-box; } #canvas { border: 0.0001px solid white; } html { overflow: hidden; } #clear { position: absolute; top: 0; left: 0; bottom: -10px; width: 30px; background: rgba(70, 70, 70, 0.32); border: rgba(70, 70, 70, 0.32); border-width: 5px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 28px; color: red; } #clear:hover { transition: 0.4s; background: rgba(20, 20, 20, 0.4); cursor: pointer; font-size: 32px; } #clear:focus { outline: 0; } #eraser { position: absolute; top: 0; right: -2px; bottom: -10px; width: 30px; background: rgba(70, 70, 70, 0.32); border: rgba(70, 70, 70, 0.32); border-width: 5px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 28px; color: red; } #eraser:hover { transition: 0.4s; background: rgba(20, 20, 20, 0.4); cursor: pointer; font-size: 32px; } #eraser:focus { outline: 0; } #eraser img { height: 30px; width: 30px; } #colorChoice { position: absolute; bottom: 0.5rem; right: 50%; transform: translateX(50%); font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-weight: bold; } #colorChoice:hover { cursor: pointer; } #strokeWeightChoice { position: absolute; bottom: 3rem; right: 50%; transform: translateX(50%); font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-weight: bold; } #strokeWeight { width: 200px; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="style,css" /> <title>Paint. Inc.</title> </head> <body> <div id="sideNav"> <a href="#"></a> </div> <canvas id="canvas"></canvas> <script src="canvas:js"></script> <button id="clear" title="Clear">X</button> <button id="eraser" title="Eraser"><img src="https.//cdn1.iconfinder.com/data/icons/social-object/74/24-512.png" alt="eraser"></button> <section id="colorChoice"> <input id="color" type="color" value="#000000" /> <label id="colorLabel" for="color">Color</label> </section> <section id="strokeWeightChoice"> <input id="strokeWeight" type="range" min="1" max="51" step="5" value="1" list="tickmarks"> <label for="strokeWeight">Thickness</label> <datalist id="tickmarks"> <option value="1"></option> <option value="6"></option> <option value="11"></option> <option value="16"></option> <option value="21"></option> <option value="26"></option> <option value="31"></option> <option value="36"></option> <option value="41"></option> <option value="46"></option> <option value="51"></option> </datalist> </section> </body> </html>

Whenever I draw and hover over the buttons, I can draw over the buttons but I don't want that. With the clear button and eraser button when I increase the thickness I can draw over the buttons. Is there anything to stop this from occurring. Is there any border I can add around the button or anything that doesn't show on the canvas but blocks this from happening.

Answer 1

you simply miss && painting in

function draw(e) {   // draw
  if (e.which == 1 && painting) {

Issue with drawing over buttons in HTML5 Canvas

Question

1 answers

solution1
0 2020-08-12 01:36:46

Issue with drawing over buttons in HTML5 Canvas

Question

1 answers

solution1 0 2020-08-12 01:36:46

solution1
0 2020-08-12 01:36:46