-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdraw.html
124 lines (112 loc) · 4.26 KB
/
draw.html
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
119
120
121
122
123
124
<html>
<body>
<style>
#canvas2_div {
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
}
canvas2 {
border: 2px solid black;
}
</style>
<div id="canvas2_div" style="overflow-x: auto;">
<canvas id="canvas2" width="560" height="560"></canvas><br>
<button onclick="javascript:clearArea();return false;">Clear Area</button>
</div>
<script>
let arr = new Array(28);
for (let i = 0; i < 28; i++) {
arr[i] = new Array(28).fill(0);
console.log(arr[i]);
}
// When true, moving the mouse draws on the canvas
let scale = 20;
let drawing = false;
let erasing = false;
let x = 0;
let y = 0;
let dist = 0;
let max = Math.sqrt(2)*(scale/2);
let slope = 255/max;
const canvas2 = document.getElementById('canvas2');
const ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = "black";
ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
// event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas2.
function drawPoint(e) {
if (!drawing && !erasing) return;
let x = e.offsetX/scale + 0.5;
let y = e.offsetY/scale + 0.5;
let x1 = x % 1;
let y1 = y % 1;
let x2 = 1 - x1;
let y2 = 1 - y1;
x = Math.floor(x);
y = Math.floor(y);
let color = 255 * (1 - x1*x1 - y1*y1);
if (!drawing) color = 0;
if (x > 0 && x < 28 && y > 0 && y < 28 && (drawing && arr[x-1][y-1] < color || erasing && arr[x-1][y-1] > color))
{
arr[x-1][y-1] = color;
ctx2.fillStyle = `rgb(${color}, ${color}, ${color})`;
ctx2.fillRect((x-1) * scale, (y-1) * scale, scale, scale);
}
color = 255 * (1 - x2*x2 - y1*y1);
if (!drawing) color = 0;
if (x >= 0 && x < 28 && y > 0 && y < 28 && (drawing && arr[x][y-1] < color || erasing && arr[x][y-1] > color))
{
arr[x][y-1] = color;
ctx2.fillStyle = `rgb(${color}, ${color}, ${color})`;
ctx2.fillRect((x) * scale, (y-1) * scale, scale, scale);
}
color = 255 * (1 - x1*x1 - y2*y2);
if (!drawing) color = 0;
if (x > 0 && x < 28 && y >= 0 && y < 28 && (drawing && arr[x-1][y] < color || erasing && arr[x-1][y] > color))
{
arr[x-1][y] = color;
ctx2.fillStyle = `rgb(${color}, ${color}, ${color})`;
ctx2.fillRect((x-1) * scale, (y) * scale, scale, scale);
}
color = 255 * (1 - x2*x2 - y2*y2);
if (!drawing) color = 0;
if (x >= 0 && x < 28 && y >= 0 && y < 28 && (drawing && arr[x][y] < color || erasing && arr[x][y] > color))
{
arr[x][y] = color;
ctx2.fillStyle = `rgb(${color}, ${color}, ${color})`;
ctx2.fillRect((x) * scale, (y) * scale, scale, scale);
}
}
// Add the event listeners for mousedown, mousemove, and mouseup
canvas2.addEventListener('mousedown', (e) => {
if (e.button == 0) drawing = true;
else if (e.button == 1) erasing = true;
drawPoint(e);
});
canvas2.addEventListener('mousemove', drawPoint);
canvas2.addEventListener('mouseup', (e) => {
if (e.button == 0) drawing = false;
else if (e.button == 1) erasing = false;
});
function drawLine(ctx2, x1, y1, x2, y2) {
ctx2.beginPath();
ctx2.strokeStyle = "white";
ctx2.lineWidth = document.getElementById('selWidth').value;
ctx2.lineJoin = "round";
ctx2.moveTo(x1, y1);
ctx2.lineTo(x2, y2);
ctx2.closePath();
ctx2.stroke();
}
function clearArea() {
ctx2.fillStyle = "black";
ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
for (let i=0; i<28; i++)
{
arr[i].fill(0);
}
}
</script>
</body>
</html>