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
125
126
127
|
const canvas = document.getElementById('drawing-board');
const ctx = canvas.getContext('2d');
const reset = document.getElementById("reset");
robot = document.getElementById('robot');
const canvasOffsetX = canvas.offsetLeft;
const canvasOffsetY = canvas.offsetTop;
robot.style.top = canvas.height/2 - robot.height/2 - canvasOffsetY;
robot.style.left = canvas.width/2 - robot.width/2 - canvasOffsetX;
let scale = 2.5
canvas.width = window.innerWidth - canvasOffsetX * 2;
canvas.height = window.innerHeight - canvasOffsetY * 2;
const tr = {x: canvas.width/2 + canvasOffsetX, y: canvas.height/2 + canvasOffsetY, a: 0}
ctx.translate(canvas.width/2 + canvasOffsetX, canvas.height/2 + canvasOffsetY)
reset.style.top = canvasOffsetY * 2 + "px";
reset.style.right = canvasOffsetX * 2 + "px";
let lineWidth = 2;
let strokeColor = "red"
let drawings = [];
let crosses = [];
ctx.lineWidth = lineWidth;
ctx.lineCap = 'square';
ctx.strokeStyle = strokeColor;
ctx.fillStyle = "red";
const wall = (x, y) => {
ctx.fillRect(x * canvas.width - canvasOffsetX, y * canvas.height - canvasOffsetY, 30, 30);
ctx.stroke();
ctx.beginPath();
}
const drawCross = (x, y) => {
ctx.moveTo(x - 5, y - 5);
ctx.lineTo(x + 5, y + 5);
ctx.moveTo(x + 5, y - 5);
ctx.lineTo(x - 5, y + 5);
ctx.stroke();
ctx.beginPath();
}
canvas.addEventListener('mousedown', (e) => {
crosses.push({x: e.layerX - canvasOffsetX, y: e.layerY - canvasOffsetY});
moveTo(-(e.layerX - canvasOffsetX - canvas.width/2) * scale, -(e.layerY - canvasOffsetY - canvas.height/2) * scale)
tr.a = Math.atan((-e.layerX + canvasOffsetX + canvas.width/2)/(e.layerY - canvasOffsetY - canvas.height/2))
if ( e.layerY - canvasOffsetY > canvas.height/2 )
{
tr.a += Math.PI
}
// if wall detected then
// drawings.push({x: (canvasOffsetX - robot.width/2)/canvas.width, y: -(20 * scale + canvasOffsetY + robot.height)/canvas.height, tr: {x: tr.x, y: tr.y, a: tr.a}}) // add a wall
update()
});
/* canvas.addEventListener('touchstart', (e) => {
drawCross(e.targetTouches[0].layerX, e.targetTouches[0].layerY);
crosses.push({x: e.targetTouches[0].layerX - canvasOffsetX, y: e.targetTouches[0].layerY - canvasOffsetY});
// moveTo((e.targetTouches[0].layerX - canvasOffsetX - canvas.width/2) * scale, (e.targetTouches[0].layerY - canvasOffsetY - canvas.height/2) * scale)
tr.a = Math.atan((-e.targetTouches[0].layerX + canvasOffsetX + canvas.width/2)/(e.targetTouches[0].layerY - canvasOffsetY - canvas.height/2))
if ( e.targetTouches[0].layerY - canvasOffsetY > canvas.height/2 )
{
tr.a += Math.PI
}
// if wall detected then
// drawings.push({x: (canvasOffsetX - robot.width/2)/canvas.width, y: -(20 * scale + canvasOffsetY + robot.height)/canvas.height, tr: {x: tr.x, y: tr.y, a: tr.a}}) // add a wall
update()
});
*/
reset.onclick = () => {
drawings = [];
crosses = [];
tr.x = canvas.width/2 + canvasOffsetX
tr.y = canvas.height/2 + canvasOffsetY
tr.a = 0
update();
}
function resizeCanvas() {
canvas.width = window.innerWidth - canvasOffsetX * 2;
canvas.height = window.innerHeight - canvasOffsetY * 2;
ctx.strokeStyle = strokeColor;
ctx.lineWidth = lineWidth;
ctx.lineCap = 'round';
ctx.fillStyle = "red";
robot.style.top = canvas.height/2 - robot.height/2 - canvasOffsetY;
robot.style.left = canvas.width/2 - robot.width/2 - canvasOffsetX;
}
function redrawCanvas(){
drawings.forEach(element => {
ctx.setTransform(1, 0, 0, 1, 0, 0)
ctx.translate(element.tr.x, element.tr.y)
ctx.rotate(element.tr.a)
wall(element.x, element.y);
});
}
function update(){
resizeCanvas();
ctx.setTransform(1,0,0,1,0,0);
for (let cross of crosses){
drawCross(cross.x, cross.y)
}
redrawCanvas();
}
const updateOnFrame = () => {
update();
requestAnimationFrame(updateOnFrame)
}
//updateOnFrame();
window.onresize = update;
|
