alikberov.github.io/guardraw.html at master · Alikberov/alikberov.github.io · GitHub

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
<html>

<head>
<script>
const	size = 32;
let	cnv;
let	ctx;
let	ink = "brown red orange white yellow green cyan blue magenta".split(/\s+/);
let	paper = "white black".split(/\s+/);

function draw() {
	ctx.globalAlpha = 1 / 128;
	ctx.fillStyle = paper[0];
	ctx.fillRect(0, 0, cnv.width, cnv.height);
	setTimeout(draw, 100);
}

function mouseDown(e) {
	if(e.button == 2) {
		paper.push(paper.shift());
		ctx.globalAlpha = 1;
		ctx.fillStyle = paper[0];
		ctx.fillRect(0, 0, cnv.width, cnv.height);
	} else
		ink.push(ink.shift());
	e.preventDefault();
}

function mouseMove(e) {
	const [x, y] = [e.offsetX, e.offsetY];
	ctx.globalAlpha = 1;
	ctx.fillStyle = ink[0];
	ctx.fillRect(x - size / 2, y - size / 2, size, size)
}

function keyDown(e) {
	ctx.globalAlpha = 1;
	ctx.fillStyle = ink[0];
	ctx.font = ctx.font.replace(/\d+/, "72");
	ctx.fillText(e.code, cnv.width / 2, cnv.height / 2);
	if(e.key.match(/F\d+|Tab/i)) {
		e.preventDefault();
	}
}

function toggleFullScreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

function main() {
	cnv = document.querySelector("canvas");
	cnv.addEventListener("mousemove", mouseMove);
	cnv.addEventListener("mousedown", mouseDown);
	cnv.addEventListener("wheel", mouseDown);
	cnv.addEventListener("contextmenu", (e) => e.preventDefault());
	cnv.width = screen.width;
	cnv.height = screen.height;
	ctx = cnv.getContext("2d");
	document.body.addEventListener("keydown", keyDown);
	document.body.addEventListener("keyup", keyDown);
	document.body.addEventListener("fullscreenchange", (event) => {alert(9)});
	draw();
}
</script>

<style>
body {
	margin	:0 0 0 0;
}
</style>
</head>

<body onload='main()'>
<canvas></canvas>
</body>