const canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var pageX,
pageY,
elem,
tool,
lengthSquare = 25,
heightSquare = 25,
previous,
mouseDown,
mouseUp,
brushColor = 'black';
function Paint() {
this.pencil = () => {
tool = 'pencil';
lengthSquare = heightSquare = 5;
};
this.brush = () => {
tool = 'brush';
lengthSquare = heightSquare = 25;
};
this.fill = () => {
tool = 'fill';
};
this.clear = () => {
tool = 'clear';
brushColor = 'white'
};
canvas.addEventListener('mousedown', () => {
mouseDown = true;
mouseUp = false;
if (tool == 'fill') {
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
});
canvas.addEventListener('mouseup', () => {
mouseDown = false;
mouseUp = true;
});
canvas.addEventListener('mousemove', () => {
if (mouseDown) {
elem = canvas.getBoundingClientRect();
pageX = event.clientX;
pageY = event.clientY;
ctx.fillStyle = brushColor;
if (tool == 'pencil' || tool == 'brush') {
ctx.fillRect(pageX - elem.left, pageY - elem.top, lengthSquare, heightSquare);
} else if (tool == 'clear') {
ctx.clearRect(pageX - elem.left, pageY - elem.top, lengthSquare, heightSquare);
}
}
});
document.body.addEventListener('click', () => {
let target = event.target;
let action = target.getAttribute('data-type');
if (action) {
if (previous) {
previous.classList.remove('active');
}
target.classList.add('active');
previous = target;
this[action]();
};
});
}
new Paint();
body {
position: relative;
min-height: 100vh;
background: gray;
margin: 0;
}
.draw {
position: absolute;
top: 0;
right: 10%;
bottom: 0;
left: 10%;
display: flex;
justify-content: center;
align-items: center;
}
.tools {
position: absolute;
top: 0%;
left: 0%;
bottom: 0%;
width: 48px;
background: #575a5e;
}
.tools>div {
width: 48px;
height: 48px;
}
.tools div:hover {
cursor: pointer;
}
.pencil {
background: url('icons.png');
background-position-x: 0;
}
.brush {
background: url('icons.png');
background-position-x: -48px;
}
.fill {
background: url('icons.png');
background-position-x: -96px;
}
.clear {
background: url('icons.png');
background-position-x: -144px;
}
.active {
background-color: #cdd0d6;
}
canvas {
border: 1px solid black;
background: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class='tools'>
<div class='pencil' data-type='pencil'></div>
<div class='brush'><img src='http://s1.iconbird.com/ico/2014/1/631/w512h5121390856650paintbrush512.png' data-type='brush' width='48px' height='48px'></div>
<div class='clear' data-type='fill'></div>
<div class='fill' data-type='clear'></div>
</div>
<div class='draw'>
<canvas width='800px' height='500px' id='canvas'></canvas>
</div>
</body>
</html>
Пытаюсь делать paint. Если быстро провести мышью над canvas, он не успевает реагировать на события, тем самым не заполняя необходимое пространство. Необходимо исправить таким образом, чтобы ему было всё равно с какой скоростью пользователь рисует.
При выполнении кода разверните его на всю страницу
mousemove
при быстром перемещении не передает каждое смещение и вызывается с какой-то частотой