-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
75 lines (68 loc) · 2.24 KB
/
index.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
window.addEventListener('load', () => {
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const colorButtons = document.querySelectorAll('.palette > button');
const widthButtons = document.querySelectorAll('.line > button');
const saveHeader = document.querySelector('header');
const clearButton = document.querySelector('#clear-canvas-button');
canvas.width = window.innerWidth
canvas.height = window.innerHeight
let PAINTING = false;
let STROKE_COLOR = 'black'
let STROKE_WIDTH = 10
const startPosition = (e) => {
PAINTING = true;
draw(e)
}
const finishedPosition = () => {
PAINTING = false;
context.beginPath();
}
const draw = (e) => {
if (!PAINTING) return;
context.lineWidth = STROKE_WIDTH;
context.lineCap = "round";
context.strokeStyle = STROKE_COLOR
context.lineTo(e.clientX, e.clientY);
context.stroke();
context.beginPath();
context.moveTo(e.clientX, e.clientY);
}
const changeColor = () => {
colorButtons.forEach(btn => {
btn.addEventListener('click', () => {
STROKE_COLOR = btn.value
})
});
}
const changeWidth = () => {
widthButtons.forEach(btn => {
btn.addEventListener('click', () => {
STROKE_WIDTH = btn.value
})
});
}
const clearCanvas = () => {
clearButton.addEventListener('click', () => {
context.clearRect(0, 0, canvas.width, canvas.height);
});
}
const saveDrawing = () => {
saveHeader.addEventListener('click', () => {
const image = canvas.toDataURL();
const tmpLink = document.createElement('a');
tmpLink.download = 'image.png';
tmpLink.href = image;
document.body.appendChild(tmpLink);
tmpLink.click();
document.body.removeChild(tmpLink);
});
}
canvas.addEventListener('mousedown', startPosition)
canvas.addEventListener('mouseup', finishedPosition)
canvas.addEventListener('mousemove', draw)
changeColor();
changeWidth();
clearCanvas();
saveDrawing();
});