Всем привет. Столкнулся со следующей проблемой. Я хочу по нажатию на кнопки рисовать соответствующие фигуры в canvas. Например, нажал на кнопку линии, и теперь я могу рисовать линии с помощью курсора ну и т.д. Для этого имеется класс active, и при нажатии на какую-либо кнопку, ей добавляется этот класс, а у других кнопок, соответственно удаляется. Я выполняю проверку с помощью if, типа если у кнопки имеется класс active, то рисуем её фигуры. Проблема в том, что условие почему-то не действует. У меня по дефолту active стоит на кнопке lineRadioBtn, если жму на circleRadioBtn, то класс active удаляется у кнопки линии и добавляется кнопки кругу, но в canvas линия всё равно рисуется. Т.е. по идеи условие if(lineRadioBtn.classList.contains('active')) теперь должно не выполняться, так как active теперь у кнопки круга. В общем помогите пожалуйста, а то я не понимаю что тут не так. Заранее спасибо P.s. все кнопки по селекторам в js получил
lineRadioBtn.addEventListener('click', function(){
this.classList.add('active');
circleRadioBtn.classList.remove('active');
dotRadioBtn.classList.remove('active');
eraser.classList.remove('active');
});
circleRadioBtn.addEventListener('click', function(){
this.classList.add('active');
lineRadioBtn.classList.remove('active');
dotRadioBtn.classList.remove('active');
eraser.classList.remove('active');
});
if(lineRadioBtn.classList.contains('active')){
canvas.style.cursor = 'crosshair';
canvas.addEventListener('mousemove', e =>{
if(ifMouseDown){
ctx.fillStyle = generalColor.value;
ctx.strokeStyle = generalColor.value;
ctx.lineWidth = generalSize.value * 2;
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
ctx.beginPath();
ctx.arc(e.clientX, e.clientY, generalSize.value, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.moveTo(e.clientX, e.clientY);
}
});
}
<div style="display: flex; flex-wrap: wrap; width: inherit;">
<input type="button" class="check-shapes line-radio-item active" title="Рисовать линиями" value="Линии" />
<input type="button" class="check-shapes circle-radio-item" title="Рисовать окружностями" value="Круги" />
<input type="button" class="check-shapes dot-radio-item" title="Рисовать точками" value="Точки" />
<input type="button" class="check-shapes eraser" value="Ластик" title="Ластик" id="color"/>
</div>