[READ-ONLY] Mirror of https://github.com/probablykasper/canvas-experiments. Just me learning to use HTML canvas
canvas-experiments.kasper.space
canvas
html5-canvas
website
9. Touch drawing test
+139
+18
9/index.html
+18
9/index.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<meta charset="utf-8">
5
+
<meta name="theme-color" content="#db5945">
6
+
<title>Canvas</title>
7
+
<!--Roboto--> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
8
+
<!--Favicon: http:/#F986DF/realfavicongenerator.net -->
9
+
<link rel="stylesheet" type="text/css" href="../css/home.css?r=<?=rand(0,999)?>">
10
+
</head>
11
+
12
+
<body style="background-color:#ffffff">
13
+
<section class="main">
14
+
<canvas style="background-color:#303039"></canvas>
15
+
</section>
16
+
<script src="main.js?r=<?=rand(0,999)?>"></script>
17
+
</body>
18
+
</html>
+18
9/index.php
+18
9/index.php
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<meta charset="utf-8">
5
+
<meta name="theme-color" content="#db5945">
6
+
<title>Canvas</title>
7
+
<!--Roboto--> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
8
+
<!--Favicon: http:/#F986DF/realfavicongenerator.net -->
9
+
<link rel="stylesheet" type="text/css" href="../css/home.css?r=<?=rand(0,999)?>">
10
+
</head>
11
+
12
+
<body style="background-color:#ffffff">
13
+
<section class="main">
14
+
<canvas style="background-color:#303039"></canvas>
15
+
</section>
16
+
<script src="main.js?r=<?=rand(0,999)?>"></script>
17
+
</body>
18
+
</html>
+103
9/main.js
+103
9/main.js
···
1
+
"use strict";
2
+
// init canvas
3
+
var canvas = document.querySelector("canvas");
4
+
var c = canvas.getContext("2d");
5
+
6
+
var cw, ch;
7
+
function resize() {
8
+
cw = window.innerWidth-50;
9
+
ch = window.innerHeight-50;
10
+
// if cw is odd, make aspect ratio correct (2:1)
11
+
if (cw%2 == 1) cw--;
12
+
13
+
// set canvas w/h
14
+
if (ch < cw/2) {
15
+
canvas.width = ch*2;
16
+
canvas.height = ch;
17
+
} else {
18
+
canvas.width = cw;
19
+
canvas.height = cw/2;
20
+
}
21
+
}
22
+
resize();
23
+
24
+
canvas.addEventListener("touchstart", onTouchStart, false);
25
+
26
+
function onTouchStart(e) {
27
+
c.fillRect(0,0,300,300);
28
+
}
29
+
30
+
31
+
32
+
33
+
function old() {
34
+
"use strict";
35
+
// init canvas
36
+
var canvas = document.querySelector("canvas");
37
+
var c = canvas.getContext("2d");
38
+
39
+
var cw, ch;
40
+
function resize() {
41
+
cw = window.innerWidth-50;
42
+
ch = window.innerHeight-50;
43
+
// if cw is odd, make aspect ratio correct (2:1)
44
+
if (cw%2 == 1) cw--;
45
+
46
+
// set canvas w/h
47
+
if (ch < cw/2) {
48
+
canvas.width = ch*2;
49
+
canvas.height = ch;
50
+
} else {
51
+
canvas.width = cw;
52
+
canvas.height = cw/2;
53
+
}
54
+
}
55
+
56
+
// update canvas size
57
+
resize();
58
+
// window.addEventListener("resize", function() {
59
+
// resize();
60
+
// });
61
+
62
+
var mousedown, mx, my, oldmx, oldmy, leftMargin, topMargin;
63
+
window.addEventListener("mousedown", function() {
64
+
mousedown = true;
65
+
startDraw();
66
+
});
67
+
window.addEventListener("mouseup", function() {
68
+
mousedown = false;
69
+
});
70
+
window.addEventListener("click", function() {
71
+
leftMargin = (window.innerWidth - canvas.width)/2;
72
+
topMargin = (window.innerHeight - canvas.height)/2;
73
+
mx = window.event.clientX - leftMargin;
74
+
my = window.event.clientY - topMargin;
75
+
c.moveTo(mx, my);
76
+
c.arc(mx, my, 0.5, Math.PI*2, 0);
77
+
c.stroke();
78
+
});
79
+
80
+
window.addEventListener("mousemove", function(e) {
81
+
if (mousedown) {
82
+
oldmx = mx;
83
+
oldmy = my;
84
+
leftMargin = (window.innerWidth - canvas.width)/2;
85
+
topMargin = (window.innerHeight - canvas.height)/2;
86
+
mx = window.event.clientX - leftMargin;
87
+
my = window.event.clientY - topMargin;
88
+
// if mousedown and inside canvas
89
+
draw();
90
+
}
91
+
});
92
+
93
+
function startDraw() {
94
+
c.beginPath();
95
+
c.lineWidth = 1;
96
+
c.strokeStyle = "#ffffff";
97
+
}
98
+
99
+
function draw() {
100
+
c.lineTo(mx, my);
101
+
c.stroke();
102
+
}
103
+
}