делаю аналог Paint используя canvas. Самые простые функции он уже исполняет, но никак не могу придумать реализацию инструмента 'заливка'(залить надо не обязательно фон, а к примеру любую неправильную фигуру), а так же отмена действия. Вот код:
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
let isMouseDown = false;
const type = document.getElementById('type');
const clear = document.getElementById('clear');
const range = document.getElementById('size');
const range2 = document.getElementById('size2');
const fill = document.getElementById('fill');
const save = document.getElementById('save');
const label = document.getElementById('lb1');
const label2 = document.getElementById('lb2');
const border = document.getElementById('border');
const label3 = document.getElementById('lb3');
const weight = document.getElementById('weight');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.addEventListener('mousedown', function(e) {
isMouseDown = true;
draw(e);
});
canvas.addEventListener('mousemove', function(e) {
if (isMouseDown) {
draw(e);
}
});
canvas.addEventListener('mouseup', function() {
isMouseDown = false;
context.beginPath();
});
canvas.addEventListener('mouseout', function() {
isMouseDown = false;
context.beginPath();
});
clear.onclick = function() {
clearCanvas();
}
function clearCanvas() {
context.clearRect(0, 0, canvas.width, canvas.height);
}
type.addEventListener('change', () => {
if (type.value == 'ractangle') {
range2.classList.add('size-active');
label2.classList.add('label-active');
label.innerHTML = 'Ширина';
} else {
range2.classList.remove('size-active');
label2.classList.remove('label-active');
label.innerHTML = 'Размер';
}
});
border.addEventListener('change', () => {
if (border.value == 'border') {
weight.classList.add('weight-active');
label3.classList.add('label-active');
} else {
weight.classList.remove('weight-active');
label3.classList.remove('label-active');
}
});
function draw(e) {
switch (type.value) {
case 'circle' :
context.beginPath();
switch (border.value) {
case ('fill') :
context.fillStyle = fill.value;
context.arc(e.clientX, e.clientY - 30, range.value / 2, 0, Math.PI * 2);
context.fill();
break;
case ('border') :
context.lineWidth = weight.value;
context.strokeStyle = fill.value;
context.arc(e.clientX, e.clientY - 30, range.value / 2, 0, Math.PI * 2);
context.stroke();
break;
}
break;
case 'line' :
context.lineWidth = range.value;
context.strokeStyle = fill.value;
context.lineTo(e.clientX, e.clientY - 30);
context.stroke();
context.beginPath();
context.fillStyle = fill.value;
context.arc(e.clientX, e.clientY - 30, range.value / 2, 0, Math.PI * 2);
context.fill();
context.beginPath();
context.moveTo(e.clientX, e.clientY - 30);
break;
case 'square' :
context.beginPath();
switch (border.value) {
case ('fill') :
context.fillStyle = fill.value;
context.fillRect(e.clientX - range.value / 2, e.clientY - (30 + range.value / 2), range.value, range.value);
break;
case ('border') :
context.lineWidth = weight.value;
context.strokeStyle = fill.value;
context.strokeRect(e.clientX - range.value / 2, e.clientY - (30 + range.value / 2), range.value, range.value);
break;
}
break;
case 'rubber' :
context.beginPath();
context.fillStyle = 'white';
context.arc(e.clientX, e.clientY - 30, range.value / 2, 0, Math.PI * 2);
context.fill();
break;
case 'ractangle' :
context.beginPath();
switch (border.value) {
case ('fill') :
context.fillStyle = fill.value;
context.fillRect(e.clientX - range.value / 2, e.clientY - range2.value / 2 - 30, range.value, range2.value);
break;
case ('border') :
context.lineWidth = weight.value;
context.strokeStyle = fill.value;
context.strokeRect(e.clientX - range.value / 2, e.clientY - range2.value / 2 - 30, range.value, range2.value);
break;
}
break;
}
}
Мне бы хотя бы подсказать логику реализации.