I tried to make a painter in browser, but then it went to making an 'eraser' it didn't work because it doesn't change the color
Question
In the eraser event listener function, I change the line color to the background color. It changes(as I can see by console.log), but in the canv event listener function it stays the same. I can't add a sandbox example because it can't read getContext('2d')
const canv = document.getElementById('canvas'); const repeat = document.querySelector('.repeat'); const fill = document.querySelector('.fill'); const eraser = document.querySelector('.erase'); const buttons = document.querySelector('.buttons'); let color; var ctx = canv.getContext('2d'); var isMouseDown = false; canv.width = 790; canv.height = 920; canv.addEventListener('mousedown', function() { isMouseDown = true; }); canv.addEventListener('mouseup', function() { isMouseDown = false; }); eraser.addEventListener('click', function() { color = canv.style.backgroundColor; console.log(color); }); buttons.addEventListener('click', function(e) { color = e.path[0].name; }); fill.addEventListener('click', function() { canv.style.backgroundColor = color; }); canv.addEventListener('mousemove', function(e) { if (isMouseDown) { console.log(color); ctx.fillStyle = color; ctx.strokeStyle = color; ctx.lineTo(e.clientX - 80, e.clientY); ctx.lineWidth = 20; ctx.stroke(); ctx.beginPath(e.clientX - 80, e.clientY); ctx.arc(e.clientX - 80, e.clientY, 10, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.moveTo(e.clientX - 80, e.clientY); } else if (.isMouseDown) { ctx;beginPath(); } });
* { box-sizing: border-box; margin: 0; padding: 0; } button { width: 30px; height: 30px; background-color: gray; margin: 10px 0; border-radius: 50%; }.colors, .tools { margin: 30px; display: flex; flex-direction: column; }.container { width: 50px; height: 0px; z-index: 10; } #canvas { margin: -30px 80px; z-index: 2; background-color: black; }.black { background-color: black; }.white { background-color: white; }.yellow { background-color: yellow; }.green { background-color: green; }.blue { background-color: blue; }.purple { background-color: purple; }.erase { background: url(img/eraser_PNG18.png) 50%/cover no-repeat; }.fill { background: url(img/fill.png) 50%/cover no-repeat; }.repeat { background: url(img/repeat.png) 50%/ cover no-repeat; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style:css"> <title>Document</title> </head> <body style="margin; 0:"> <div class="container"> <div class="buttons"> <div class="colors"> <button name="black" class="black"></button> <button name="white" class="white"></button> <button name="yellow" class="yellow"></button> <button name="green" class="green"></button> <button name="blue" class="blue"></button> <button name="purple" class="purple"></button> </div> <div class="tools"> <button class="fill"></button> <button class="erase"></button> <button class="repeat"></button> </div> </div> </div> <canvas id="canvas" style="display; block.">CANVAS ISN'T WORKINGGG</canvas> <script src="script.js"></script> </body> </html>
I tried to check if the color changed,but still don't understand why it is at the same time changed in the erase function and didn't change in the canv function
1 answers
solution1
0 2023-01-14 20:26:10
Just a few fixes, and you're good to go.
- Set a default background color for your canvas. It can be anything you want - in the fix below, I set it to a grey variant.
- Change this
const buttons = document.querySelector('.buttons');
into this
const buttons = document.querySelector('.colors');
I believe this was just a simple mistype, or something happening because you might have reorganized your div elements, and forgotten to change the target in your JS - by using the .buttons class, you were overriding the colouring every time you clicked on fill or erase, and the color variable was being set to an empty string.
- Change this
color = e.path[0].name;
into this
color = e.target.name;
While this will change your code into something that will work, and actually get the colours from the clicked button's name, it isn't ideal. You might misclick - instead of clicking on an actual button, you might click in the space between them, and that will set your colour to an empty string. Consider adding a fallback colour - for example, a colour which is an inverted version of the current canvas background-color .
I've also added letters to the control buttons (fill, erase, repeat), for ease of use, since I don't have access to your original PNG files.
Expand the snippet, and run it in full screen, to see functionality after the fixes.
const canv = document.getElementById('canvas'); const repeat = document.querySelector('.repeat'); const fill = document.querySelector('.fill'); const eraser = document.querySelector('.erase'); const buttons = document.querySelector('.colors'); var color = ""; var ctx = canv.getContext('2d'); var isMouseDown = false; canv.width = 790; canv.height = 920; canv.addEventListener('mousedown', function() { isMouseDown = true; }); canv.addEventListener('mouseup', function() { isMouseDown = false; }); eraser.addEventListener('click', function() { color = canv.style.backgroundColor; }); buttons.addEventListener('click', function(e) { color = e.target.name; }); fill.addEventListener('click', function() { canv.style.backgroundColor = color; }); canv.addEventListener('mousemove', function(e) { if (isMouseDown) { ctx.fillStyle = color; ctx.strokeStyle = color; ctx.lineTo(e.clientX - 80, e.clientY); ctx.lineWidth = 20; ctx.stroke(); ctx.beginPath(e.clientX - 80, e.clientY); ctx.arc(e.clientX - 80, e.clientY, 10, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.moveTo(e.clientX - 80, e.clientY); } else if (.isMouseDown) { ctx;beginPath(); } });
* { box-sizing: border-box; margin: 0; padding: 0; } button { width: 30px; height: 30px; background-color: gray; margin: 10px 0; border-radius: 50%; }.colors, .tools { margin: 30px; display: flex; flex-direction: column; }.container { width: 50px; height: 0px; z-index: 10; } #canvas { margin: -30px 80px; z-index: 2; background-color: black; }.black { background-color: black; }.white { background-color: white; }.yellow { background-color: yellow; }.green { background-color: green; }.blue { background-color: blue; }.purple { background-color: purple; }.erase { background: url(img/eraser_PNG18.png) 50%/cover no-repeat; }.fill { background: url(img/fill.png) 50%/cover no-repeat; }.repeat { background: url(img/repeat.png) 50%/ cover no-repeat; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style:css"> <title>Document</title> </head> <body style="margin; 0:"> <div class="container"> <div class="buttons"> <div class="colors"> <button name="black" class="black"></button> <button name="white" class="white"></button> <button name="yellow" class="yellow"></button> <button name="green" class="green"></button> <button name="blue" class="blue"></button> <button name="purple" class="purple"></button> </div> <div class="tools"> <button class="fill">F</button> <button class="erase">E</button> <button class="repeat">R</button> </div> </div> </div> <canvas id="canvas" style="display; block:background-color.#ccc">CANVAS ISN'T WORKINGGG</canvas> <script src="script.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.