-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
118 lines (98 loc) · 2.41 KB
/
app.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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
const canvas = document.querySelector('#jsCanvas');
const colors = document.querySelectorAll('.jsColor');
const widthRange = document.querySelector('#jsRange');
const drawBtn = document.querySelector('#jsDraw');
const fillBtn = document.querySelector('#jsFill');
const saveBtn = document.querySelector('#jsSave');
const ctx = initCtx(canvas);
let isPainting = false;
let currentMode = 'DRAW';
function initCtx(canvas) {
if (!canvas) {
return null;
}
canvas.width = 700;
canvas.height = 700;
let ctx = canvas.getContext('2d');
// white background by default
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#2c2c2c';
ctx.strokeStyle = '#2c2c2c';
ctx.lineWidth = 2.5;
return ctx;
}
function changeColor(color) {
ctx.fillStyle = color;
ctx.strokeStyle = color;
}
function changeLineWidth(width) {
ctx.lineWidth = width;
}
function startPainting() {
isPainting = true;
if (currentMode === 'FILL') {
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
}
function stopPainting() {
isPainting = false;
}
function changeMode(mode) {
currentMode = mode;
}
if (canvas) {
canvas.addEventListener('mouseleave', (event) => {
stopPainting();
});
canvas.addEventListener('mouseup', (event) => {
stopPainting();
});
canvas.addEventListener('mousedown', (event) => {
startPainting();
});
canvas.addEventListener('mousemove', (event) => {
const { offsetX, offsetY } = event;
if (!isPainting) {
ctx.beginPath();
ctx.moveTo(offsetX, offsetY);
} else {
ctx.lineTo(offsetX, offsetY);
ctx.stroke();
}
});
canvas.addEventListener('contextmenu', (event) => {
event.preventDefault();
});
}
if (colors) {
Array.from(colors).forEach((color) => {
color.addEventListener('click', (_) => {
changeColor(color.style.backgroundColor);
});
});
}
if (widthRange) {
widthRange.addEventListener('input', (event) => {
const width = event.target.value;
changeLineWidth(width);
});
}
if (drawBtn) {
drawBtn.addEventListener('click', (event) => {
changeMode('DRAW');
});
}
if (fillBtn) {
fillBtn.addEventListener('click', (event) => {
changeMode('FILL');
});
}
if (saveBtn) {
saveBtn.addEventListener('click', (event) => {
const link = document.createElement('a');
link.href = canvas.toDataURL('image/jpeg');
link.download = 'PaintJS';
link.click();
});
}