forked from Romi904/Scribblepad
-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
80 lines (69 loc) · 1.69 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
console.log('running...');
const spanEl = document.getElementById('size');
const btn1 = document.getElementById('increase');
const btn2 = document.getElementById('decrease');
const colorEl = document.getElementById('color');
const canvas = document.getElementById('canvas');
const reset = document.getElementById('reset');
const ctx = canvas.getContext("2d");
var size = 10;
let isPressed = false;
let color = "blue";
let x = undefined;
let y = undefined;
canvas.addEventListener("mousedown", (e) => {
isPressed = true;
// console.log(isPressed);
x = e.offsetX;
y = e.offsetY;
});
canvas.addEventListener("mouseup", (e) => {
isPressed = false;
x = undefined;
y = undefined;
});
canvas.addEventListener("mousemove", (e) => {
if (isPressed) {
const x2 = e.offsetX;
const y2 = e.offsetY;
drawCircle(x2, y2);
drawCircle(x2, y2);
drawLine(x, y, x2, y2);
x = x2;
y = y2;
}
});
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();
}
function drawCircle(x, y) {
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
}
btn1.addEventListener("click", () => {
size += 5;
if (size > 50) {
size = 50;
}
spanEl.innerText = size;
});
btn2.addEventListener("click", () => {
size -= 5;
if (size < 5) {
size = 5;
}
spanEl.innerText = size;
});
colorEl.addEventListener("change", (e) => {
color = e.target.value;
})
reset.addEventListener("click", () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});