-
Notifications
You must be signed in to change notification settings - Fork 0
/
draw.js
55 lines (45 loc) · 1.32 KB
/
draw.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
let canvas = document.getElementById('canvas');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.style.backgroundColor = "aliceblue";
let ctx = canvas.getContext('2d');
ctx.lineWidth = 5;
let prevX = null;
let prevY = null;
let draw = false;
let clrs = document.querySelectorAll('.clr');
clrs = Array.from(clrs);
clrs.forEach(clr => {
clr.addEventListener('click', () => {
ctx.strokeStyle = clr.dataset.clr;
});
});
let clearBtn = document.querySelector('.clear');
clearBtn.addEventListener('click', () => {
ctx.clearRect(0,0,canvas.width,canvas.height);
});
let saveBtn = document.querySelector('.save');
saveBtn.addEventListener('click', () => {
let data = canvas.toDataURL('imag/png');
let a = document.createElement('a');
a.href = data;
a.download = 'sketch.png';
a.click();
});
window.addEventListener('mousedown', (e) => draw = true);
window.addEventListener('mouseup', (e) => draw = false);
window.addEventListener('mousemove', function(e){
if(prevX == null || prevY == null || !draw){
prevX = e.clientX;
prevY = e.clientY;
return;
}
let mouseX = e.clientX;
let mouseY = e.clientY;
ctx.beginPath();
ctx.moveTo(prevX,prevY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
prevX = e.clientX;
prevY = e.clientY;
});