68 lines
1.8 KiB
JavaScript
68 lines
1.8 KiB
JavaScript
document.addEventListener('contextmenu', event => event.preventDefault());
|
|
document.addEventListener('mousedown', startPainting);
|
|
document.addEventListener('mouseup', stopPainting);
|
|
document.addEventListener('mousemove', draw);
|
|
window.addEventListener('resize', resize);
|
|
|
|
const colorSelector = document.getElementById('colorSelector');
|
|
const weightSlider = document.getElementById('weightSlider');
|
|
const clearButton = document.getElementById('clearButton');
|
|
const canvas = document.getElementById('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
let color = 'green';
|
|
let weight = 5;
|
|
|
|
document.addEventListener('wheel', e => {
|
|
if (e.deltaY > 0) {
|
|
if (weight + 5 > 40) return;
|
|
weight += 5;
|
|
} else {
|
|
if (weight - 5 <= 0) return;
|
|
weight -= 5;
|
|
}
|
|
|
|
weightSlider.value = weight;
|
|
})
|
|
|
|
clearButton.addEventListener('click', () => ctx.clearRect(0, 0, canvas.width, canvas.height))
|
|
weightSlider.addEventListener('change', e => weight = e.target.value)
|
|
colorSelector.addEventListener('change', e => color = e.target.value)
|
|
resize();
|
|
|
|
function resize() {
|
|
ctx.canvas.width = window.innerWidth;
|
|
ctx.canvas.height = window.innerHeight;
|
|
}
|
|
|
|
let lastPos = { x: 0, y: 0 };
|
|
let paint = false;
|
|
|
|
function getPosition(event) {
|
|
lastPos.x = event.clientX - canvas.offsetLeft;
|
|
lastPos.y = event.clientY - canvas.offsetTop;
|
|
}
|
|
|
|
function startPainting(event) {
|
|
paint = true;
|
|
getPosition(event);
|
|
}
|
|
|
|
function stopPainting() {
|
|
paint = false;
|
|
}
|
|
|
|
function draw(event) {
|
|
if (!paint) return;
|
|
|
|
ctx.beginPath();
|
|
ctx.lineWidth = weight;
|
|
ctx.lineCap = 'round';
|
|
|
|
ctx.strokeStyle = color;
|
|
ctx.moveTo(lastPos.x, lastPos.y);
|
|
getPosition(event);
|
|
|
|
ctx.lineTo(lastPos.x, lastPos.y);
|
|
ctx.stroke();
|
|
} |