2

I am making a smart board and I added an eraser button how it works : it takes the color of the board and make the pen color like it as you draw with black on black. `

let eraser = document.querySelector('.clear');
function eraserfx(){
  ctx.strokeStyle = canvas.style.backgroundColor;
  ctx.fillStyle = canvas.style.backgroundColor;
}
eraser.addEventListener('click' , eraserfx);

` the problem: when the website is loaded the board color is default white then when the eraser clicked I expected it will make the pen color white but it doesn't work also when I change the board color the eraser works with no problem even if I changed the color to white again.

I tried to make an if statement in a function works on load the website: `

window.addEventListener('load' , ()=>{
  let white = canvas.style.background = '#ffffff';
  if(white){
    eraser.onclick = ()=>{
      ctx.strokeStyle = '#ffffff';
      ctx.fillStyle = '#ffffff';
    }
  }else{
    eraser.onclick = ()=>{
      ctx.strokeStyle = canvas.style.backgroundColor;
      ctx.fillStyle = canvas.style.backgroundColor;
    }
  }
})

` the if works but the else condition is not what I want is solve this problem that onload the website the eraser works with no problem with out changing the board color. if you can make an other solution or a full new thing for the eraser okay.

and there the full code

// the smart board;
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');


canvas.width = 1200;
canvas.height = 500;

let isPainting = false;
let lineWidth = 5;
let startX;
let startY;

//clear btn
let clearAll = document.querySelector('.clear-all');
clearAll.addEventListener('click' , ()=>{
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  function clearAnimation(){
    clearAll.style.animation = "clear-animation 2s ease-in-out"
  }
  setInterval(clearAnimation , 100);
  clearAll.style.animation = "none";
})

// the eraser
let eraser = document.querySelector('.clear');
function eraserfx(){
  ctx.strokeStyle = canvas.style.backgroundColor;
  ctx.fillStyle = canvas.style.backgroundColor;
}
eraser.addEventListener('click' , eraserfx);
window.addEventListener('load' , ()=>{
  let white = canvas.style.background = '#ffffff';
  if(white){
    eraser.onclick = ()=>{
      ctx.strokeStyle = '#ffffff';
      ctx.fillStyle = '#ffffff';
    }
  }else{
    eraser.onclick = ()=>{
      ctx.strokeStyle = canvas.style.backgroundColor;
      ctx.fillStyle = canvas.style.backgroundColor;
    }
  }
})

//color btn
let color  = document.querySelector('.color');
color.addEventListener('change' , ()=>{
  localStorage.setItem('color' , color.value);
  ctx.strokeStyle = color.value;
  ctx.fillStyle = color.value;
  if(small.style.backgroundColor != ""){
    small.style.backgroundColor = color.value;
  }
  else if(medium.style.backgroundColor != ""){
    medium.style.backgroundColor = color.value;
  }
  else if(large.style.backgroundColor != ""){
    large.style.backgroundColor = color.value;
  }

})
//board color
let bcolor = document.querySelector('.b-color');
bcolor.addEventListener('change' , ()=>{
  canvas.style.backgroundColor = bcolor.value;
})
//line width btn
let small = document.querySelector('.small');
let medium = document.querySelector('.medium');
let large = document.querySelector('.large');
let special = document.querySelector('.special');

special.addEventListener('change' , ()=>{
  lineWidth = special.value;
})
small.addEventListener('click' , ()=>{
  lineWidth = 5;
  small.style.backgroundColor = color.value;
  small.style.opacity = "1";
  medium.style.opacity = "0.7";
  large.style.opacity = "0.7";
  medium.style.backgroundColor = "";
  large.style.backgroundColor = "";
  special.value = 5;
})

medium.addEventListener('click', ()=>{
  lineWidth = 10;
  medium.style.backgroundColor = color.value;
  medium.style.opacity = "1";
  small.style.opacity = "0.7";
  large.style.opacity = "0.7";
  small.style.backgroundColor = "";
  large.style.backgroundColor = "";
  special.value = 10;
})

large.addEventListener('click', ()=>{
  lineWidth = 20;
  large.style.backgroundColor = color.value;
  large.style.opacity = "1";
  medium.style.opacity = "0.7";
  small.style.opacity = "0.7";
  medium.style.backgroundColor = "";
  small.style.backgroundColor = "";
  special.value = 20;
})


//drawing
canvas.addEventListener('mousedown', (e) => {
  isPainting = true;
  startX = e.clientX;
  startY = e.clientY;
});

canvas.addEventListener('mouseup', e => {
  isPainting = false;
  ctx.stroke();
  ctx.beginPath();
});


const draw = (e) => {
  if(!isPainting) {
      return;
  }

  ctx.lineWidth = lineWidth;
  ctx.lineCap = 'round';
  let rect = canvas.getBoundingClientRect();
  ctx.lineTo(e.clientX-rect.left , e.clientY-rect.top);
  ctx.stroke();
}
let pen = document.querySelector('.pentool');
pen.addEventListener('click' , ()=>{
  canvas.addEventListener('mousemove' , draw);
  ctx.strokeStyle = localStorage.getItem('color');
  ctx.fillStyle = localStorage.getItem('color');
})

// black board mode
let btn = document.querySelector('.blackboard-btn');
let state = false; 
btn.addEventListener('click' , ()=>{
  if(state === false){
    canvas.style.backgroundImage = 'url(black-1072366.jpg)';
    canvas.style.backgroundSize = 'cover';
    canvas.style.backgroundPosition = 'center';
    state = true ; 
    btn.innerText = "ON";
    btn.title = 'black board is on';
    color.value = '#ffffff';
    medium.click();
    document.querySelector(".board-color").style.opacity = '0.2';
    document.querySelector(".board-color").title = 'turn off black board to use';
    document.querySelector(".b").style.opacity = '0.2';
    document.querySelector(".b-color").style.pointerEvents = 'none';
    document.querySelector(".b").style.pointerEvents = 'none';
    ctx.strokeStyle = '#ffffff';
    ctx.fillStyle = '#ffffff';
  }else{
    canvas.style.backgroundImage = '';
    canvas.style.backgroundSize = '';
    canvas.style.backgroundPosition = '';
    state = false ; 
    btn.innerText = "OFF";
    btn.title = 'black board is off';
    color.value = '#000000';
    medium.click();
    document.querySelector(".board-color").style.opacity = '';
    document.querySelector(".board-color").title = 'board color';
    document.querySelector(".b").style.opacity = '';
    document.querySelector(".b").style.pointerEvents = '';
    document.querySelector(".b-color").style.pointerEvents = '';
    ctx.strokeStyle = '#000000';
    ctx.fillStyle = '#000000';
  }
})
body{
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction:column;
    background: rgb(224,224,224);
    background: linear-gradient(177deg, rgba(224,224,224,1) 0%, rgba(83,126,150,1) 100%);
    min-height:100vh;
    overflow-x: hidden;
}
.smartboard{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items: center;
    text-align:center;
    width: 90%;
    height: fit-content;
    padding: 20px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.401);
    margin-top: 200px;
    box-shadow: rgba(0, 0, 0, 0.372) 0px 0px 30px 5px;
}
.smartboard h1{
    color: #fff;
    font-family:arial;
    user-select: none;
}
.tools{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: rgb(55, 55, 55);
    width: 100%;
    height: 50px;
    border-radius: 10px;
    gap: 10px;
}
.tools h4{
    color: #000;
    font-family: arial;
    text-transform: capitalize;
}
.tool{
    display: flex;
    flex-direction: row;
    gap: 20px;
    border: #fff solid 1px;
    border-radius: 10px;
    padding: 0px 5px 0px 5px;
    margin-right: 50px;
}
.pentool{
    width: 30px;
    height: 30px;
    background-image: url(icons8-ball-point-pen-100.png);
    background-size:cover;
    cursor: pointer;
}
.rectangle{
    width: 35px;
    height: 35px;
    background-image: url(icons8-rectangular-90.png);
    background-size:cover;
    cursor: pointer;
}
.clear{
    width: 30px;
    height: 30px;
    background-image: url(icons8-eraser-90.png);
    background-size: cover;
    cursor: pointer;
}
.clear-all{
    width: 30px;
    height: 30px;
    background-image: url(icons8-delete-view-100.png);
    background-size: cover;
    cursor: pointer;
}
.sizes{
    display: flex;
    flex-direction: row;
    gap: 20px;
    border: #fff solid 1px;
    border-radius: 10px;
    padding:5px;
    justify-content: center;
    align-items: center;
    margin-right: 50px;
}
.small{
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
    cursor: pointer;
}
.medium{
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 50%;
    cursor: pointer;
}
.large{
    width: 30px;
    height: 30px;
    background: #000;
    border-radius: 50%;
    cursor: pointer;
}
.special{
    width: 35px;
    height: 35px;
    background: rgba(0, 0, 0, 0.388);
    border-radius: 30%;
    cursor: pointer;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    font-family: arial;
}
.colors{
    display: flex;
    flex-direction: row;
    gap: 10px;
    border: #fff solid 1px;
    border-radius: 10px;
    padding:2px;
    justify-content: center;
    align-items: center;
    margin-right:50px;
}
.colors input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}
.colors input::-webkit-color-swatch {
    border-radius:15%;
    border: none;
}
.colors input::-moz-color-swatch {
    border-radius:15%;
    border: none;
}
.board-color{
    display: flex;
    flex-direction: row;
    gap: 10px;
    border: #fff solid 1px;
    border-radius: 10px;
    padding:2px;
    justify-content: center;
    align-items: center;
}
.board-color input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}
.board-color input::-webkit-color-swatch {
    border-radius:15%;
    border: none;
}
.board-color input::-moz-color-swatch {
    border-radius:15%;
    border: none;
}
.small:hover , .medium:hover , .large:hover , .color:hover , .pentool:hover , .clear:hover  ,.special:hover , .clear-all:hover{
    transform: scale(1.1);
}
.on:hover , .off:hover{
    opacity:0.6;
}
#canvas{
    width: 1200px;
    height: 500px;
    box-shadow: #000 0px 0px 20px;
    margin-top: 10px;
    background: #ffffff;
    transition: none;
}
.smartboard:hover{
    filter: none;
}
@keyframes clear-animation {
    0%{
        opacity:1;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity:1;
    }
}
.black-board{
    width:40px;
    height:30px;
    display:flex;
    flex-direction:row;
    border-radius:10px;
    border:solid 1px #fff;
    padding:5px;
    margin-right: 50px;
}
.blackboard-btn{
    width:40px;
    height:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#fff;
    font-family:arial;
    text-transform:capitalize;
    background:rgb(0, 0, 0);
    border-radius:10px;
    user-select:none;
    cursor:pointer;
}
    <div class="smartboard" id="smart-board">
        <h1>smart board</h1>
        <div class="tools">
            <h4>tools</h4>
            <div class="tool">
                <div class="pentool" title="start drawing">pen</div>
                <div class="clear" title="eraser">eraser</div>
                <div class="clear-all" title="clear all">clear</div>
            </div>
            <h4>size</h4>
            <div class="sizes">
                <div class="small" title="small size"></div>
                <div class="medium" title="medium size"></div>
                <div class="large" title="large size"></div>
                <input type="text" class="special" title="special size" placeholder="px">
            </div>
            <h4>pen color</h4>
            <div class="colors">
                <input type="color" value="#000000" class="color" title="pen color">
            </div>
            <h4>black board</h4>
            <div class="black-board">
                <div class="blackboard-btn" title="black board is off">OFF</div>
            </div>
            <h4 class="b">board color</h4>
            <div class="board-color">
                <input type="color" value="#ffffff" class="b-color" title="board color">
            </div>
        </div>
        <canvas id="canvas"></canvas>
    </div>
  • post your full code [mcve] – Joel Nov 20 '22 at 11:32
  • @joel it hard to send the full code but I will edit the question itself –  Nov 20 '22 at 11:48
  • You also have an issue in `let white = canvas.style.background = '#ffffff';` `white` will always be truthy here, to do comparison use `==` or `===` (once again, against `getComputedStyle(canvas).backgroundColor`). But anyway, to make an eraser you want to draw with transparent pixels, not with the CSS background-color pixels. Here if you change the background later you'll have your previous eraser lines visible. To draw with transparent pixels use the `"destination-out"` [composite mode](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation). – Kaiido Nov 21 '22 at 01:03

0 Answers0