-
Notifications
You must be signed in to change notification settings - Fork 8
/
script.js
90 lines (69 loc) · 1.72 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
const canvas = document.getElementById(`canvas`);
const decButton = document.getElementById(`decrease`);
const incButton = document.getElementById(`increase`);
const sizeEl = document.getElementById(`size`);
const colorEl = document.getElementById(`color`);
const clearEl = document.getElementById(`clear`);
const ctx = canvas.getContext(`2d`);
let size = 10;
let isPressed = false;
let color = 'black';
let x;
let y;
canvas.addEventListener('mousedown', (e) => {
isPressed = true;
x = e.offsetX;
y = e.offsetY;
})
canvas.addEventListener('mouseup', (e) => {
isPressed = false;
x = undefined;
y = undefined;
})
function drawCircle(x, y) {
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
}
function drawLine(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = color;
ctx.lineWidth = size * 2;
ctx.stroke();
}
canvas.addEventListener('mousemove', (e) => {
if (isPressed) {
const x2 = e.offsetX;
const y2 = e.offsetY;
drawCircle(x2, y2);
drawLine(x, y, x2, y2);
x = x2;
y = y2;
}
})
function updateSizeOnScreen() {
sizeEl.innerText = size;
}
decButton.addEventListener('click', () => {
console.log("Event Dec Fired");
size -= 5;
if (size < 5)
size = 5;
updateSizeOnScreen();
})
incButton.addEventListener('click', () => {
console.log("Event Inc Fired");
size += 5;
if (size > 50)
size = 50;
updateSizeOnScreen();
})
colorEl.addEventListener('change', (e) => {
color = e.target.value;
})
clearEl.addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
})