kasper.space
[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
Replace 8 with 9
author
KH
date
(Jun 25, 2017, 6:59 PM +0200)
commit
04ff7c01
04ff7c010cf7c2a64e393760f11c26714a5607e2
parent
d5f0d121
d5f0d121400b7d061128239462b737f5197650d2
+132
-243
+2
-4
8/index.html
+2
-4
8/index.html
···
9
9
<link rel="stylesheet" type="text/css" href="../css/home.css?r=<?=rand(0,999)?>">
10
10
</head>
11
11
12
-
<body style="background-color:#272730">
12
+
<body class="eight" style="background-color:#272730">
13
13
<section class="main">
14
14
<canvas style="background-color:#303039"></canvas>
15
15
</section>
16
-
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
17
-
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> -->
18
-
<script src="main.js"></script>
16
+
<script src="main.js?r=<?=rand(0,999)?>"></script>
19
17
</body>
20
18
</html>
+1
-4
8/index.php
+1
-4
8/index.php
···
7
7
<!--Roboto--> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
8
8
<!--Favicon: http:/#F986DF/realfavicongenerator.net -->
9
9
<link rel="stylesheet" type="text/css" href="../css/home.css?r=<?=rand(0,999)?>">
10
-
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
11
10
</head>
12
11
13
-
<body style="background-color:#272730">
12
+
<body class="eight" style="background-color:#272730">
14
13
<section class="main">
15
14
<canvas style="background-color:#303039"></canvas>
16
15
</section>
17
-
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
18
-
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> -->
19
16
<script src="main.js?r=<?=rand(0,999)?>"></script>
20
17
</body>
21
18
</html>
+126
-31
8/main.js
+126
-31
8/main.js
···
19
19
canvas.height = cw/2;
20
20
}
21
21
}
22
-
23
-
// update canvas size
24
22
resize();
25
-
// window.addEventListener("resize", function() {
26
-
// resize();
27
-
// });
28
23
29
-
var mousedown, mx, my, oldmx, oldmy, leftMargin, topMargin;
30
-
window.addEventListener("mousedown", function() {
31
-
mousedown = true;
24
+
// get position of the touch/mouse relative to canvas
25
+
function getTouchPos(e) {
26
+
return {
27
+
x: e.touches[0].clientX - canvas.getBoundingClientRect().left,
28
+
y: e.touches[0].clientY - canvas.getBoundingClientRect().top
29
+
}
30
+
}
31
+
function getMousePos(e) {
32
+
return {
33
+
x: e.clientX - canvas.getBoundingClientRect().left,
34
+
y: e.clientY - canvas.getBoundingClientRect().top
35
+
}
36
+
}
37
+
38
+
var pos = {}, posLast = {}, drawing;
39
+
// on touch down
40
+
canvas.addEventListener("touchstart", function(e) {
41
+
var touch = e.touches[0];
42
+
pos = getTouchPos(e);
43
+
startDraw();
44
+
}, false);
45
+
// on touch up
46
+
window.addEventListener("touchend", function (e) {
47
+
endDraw();
48
+
}, false);
49
+
// on touch move
50
+
window.addEventListener("touchmove", function(e) {
51
+
if (drawing) {
52
+
posLast = pos;
53
+
pos = getTouchPos(e);
54
+
draw();
55
+
}
56
+
}, false);
57
+
58
+
// on mouse down
59
+
canvas.addEventListener("mousedown", function(e) {
60
+
pos = getMousePos(e);
32
61
startDraw();
33
62
});
34
-
window.addEventListener("mouseup", function() {
35
-
mousedown = false;
36
-
});
37
-
window.addEventListener("click", function() {
38
-
leftMargin = (window.innerWidth - canvas.width)/2;
39
-
topMargin = (window.innerHeight - canvas.height)/2;
40
-
mx = window.event.clientX - leftMargin;
41
-
my = window.event.clientY - topMargin;
42
-
c.moveTo(mx, my);
43
-
c.arc(mx, my, 0.5, Math.PI*2, 0);
44
-
c.stroke();
63
+
window.addEventListener("mouseup", function(e) {
64
+
endDraw();
45
65
});
46
-
47
66
window.addEventListener("mousemove", function(e) {
48
-
if (mousedown) {
49
-
oldmx = mx;
50
-
oldmy = my;
51
-
leftMargin = (window.innerWidth - canvas.width)/2;
52
-
topMargin = (window.innerHeight - canvas.height)/2;
53
-
mx = window.event.clientX - leftMargin;
54
-
my = window.event.clientY - topMargin;
55
-
// if mousedown and inside canvas
67
+
if (drawing) {
68
+
posLast = pos;
69
+
pos = getMousePos(e);
56
70
draw();
57
71
}
58
72
});
59
73
74
+
60
75
function startDraw() {
61
-
c.beginPath();
76
+
console.log("start");
62
77
c.lineWidth = 1;
63
78
c.strokeStyle = "#ffffff";
79
+
drawing = true;
64
80
}
65
-
81
+
function endDraw() {
82
+
drawing = false;
83
+
}
66
84
function draw() {
67
-
c.lineTo(mx, my);
85
+
c.beginPath();
86
+
c.moveTo(posLast.x, posLast.y);
87
+
c.lineTo(pos.x, pos.y);
68
88
c.stroke();
69
89
}
90
+
91
+
92
+
93
+
94
+
function old() {
95
+
"use strict";
96
+
// init canvas
97
+
var canvas = document.querySelector("canvas");
98
+
var c = canvas.getContext("2d");
99
+
100
+
var cw, ch;
101
+
function resize() {
102
+
cw = window.innerWidth-50;
103
+
ch = window.innerHeight-50;
104
+
// if cw is odd, make aspect ratio correct (2:1)
105
+
if (cw%2 == 1) cw--;
106
+
107
+
// set canvas w/h
108
+
if (ch < cw/2) {
109
+
canvas.width = ch*2;
110
+
canvas.height = ch;
111
+
} else {
112
+
canvas.width = cw;
113
+
canvas.height = cw/2;
114
+
}
115
+
}
116
+
117
+
// update canvas size
118
+
resize();
119
+
// window.addEventListener("resize", function() {
120
+
// resize();
121
+
// });
122
+
123
+
var mousedown, mx, my, oldmx, oldmy, leftMargin, topMargin;
124
+
window.addEventListener("mousedown", function() {
125
+
mousedown = true;
126
+
startDraw();
127
+
});
128
+
window.addEventListener("mouseup", function() {
129
+
mousedown = false;
130
+
});
131
+
window.addEventListener("click", function() {
132
+
leftMargin = (window.innerWidth - canvas.width)/2;
133
+
topMargin = (window.innerHeight - canvas.height)/2;
134
+
mx = window.event.clientX - leftMargin;
135
+
my = window.event.clientY - topMargin;
136
+
c.moveTo(mx, my);
137
+
c.arc(mx, my, 0.5, Math.PI*2, 0);
138
+
c.stroke();
139
+
});
140
+
141
+
window.addEventListener("mousemove", function(e) {
142
+
if (mousedown) {
143
+
oldmx = mx;
144
+
oldmy = my;
145
+
leftMargin = (window.innerWidth - canvas.width)/2;
146
+
topMargin = (window.innerHeight - canvas.height)/2;
147
+
mx = window.event.clientX - leftMargin;
148
+
my = window.event.clientY - topMargin;
149
+
// if mousedown and inside canvas
150
+
draw();
151
+
}
152
+
});
153
+
154
+
function startDraw() {
155
+
c.beginPath();
156
+
c.lineWidth = 1;
157
+
c.strokeStyle = "#ffffff";
158
+
}
159
+
160
+
function draw() {
161
+
c.lineTo(mx, my);
162
+
c.stroke();
163
+
}
164
+
}
-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 class="nine" style="background-color:#2B2330">
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 class="nine" style="background-color:#2B2330">
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>
-164
9/main.js
-164
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
-
// get position of the touch/mouse relative to canvas
25
-
function getTouchPos(e) {
26
-
return {
27
-
x: e.touches[0].clientX - canvas.getBoundingClientRect().left,
28
-
y: e.touches[0].clientY - canvas.getBoundingClientRect().top
29
-
}
30
-
}
31
-
function getMousePos(e) {
32
-
return {
33
-
x: e.clientX - canvas.getBoundingClientRect().left,
34
-
y: e.clientY - canvas.getBoundingClientRect().top
35
-
}
36
-
}
37
-
38
-
var pos = {}, posLast = {}, drawing;
39
-
// on touch down
40
-
canvas.addEventListener("touchstart", function(e) {
41
-
var touch = e.touches[0];
42
-
pos = getTouchPos(e);
43
-
startDraw();
44
-
}, false);
45
-
// on touch up
46
-
window.addEventListener("touchend", function (e) {
47
-
endDraw();
48
-
}, false);
49
-
// on touch move
50
-
window.addEventListener("touchmove", function(e) {
51
-
if (drawing) {
52
-
posLast = pos;
53
-
pos = getTouchPos(e);
54
-
draw();
55
-
}
56
-
}, false);
57
-
58
-
// on mouse down
59
-
canvas.addEventListener("mousedown", function(e) {
60
-
pos = getMousePos(e);
61
-
startDraw();
62
-
});
63
-
window.addEventListener("mouseup", function(e) {
64
-
endDraw();
65
-
});
66
-
window.addEventListener("mousemove", function(e) {
67
-
if (drawing) {
68
-
posLast = pos;
69
-
pos = getMousePos(e);
70
-
draw();
71
-
}
72
-
});
73
-
74
-
75
-
function startDraw() {
76
-
console.log("start");
77
-
c.lineWidth = 1;
78
-
c.strokeStyle = "#ffffff";
79
-
drawing = true;
80
-
}
81
-
function endDraw() {
82
-
drawing = false;
83
-
}
84
-
function draw() {
85
-
c.beginPath();
86
-
c.moveTo(posLast.x, posLast.y);
87
-
c.lineTo(pos.x, pos.y);
88
-
c.stroke();
89
-
}
90
-
91
-
92
-
93
-
94
-
function old() {
95
-
"use strict";
96
-
// init canvas
97
-
var canvas = document.querySelector("canvas");
98
-
var c = canvas.getContext("2d");
99
-
100
-
var cw, ch;
101
-
function resize() {
102
-
cw = window.innerWidth-50;
103
-
ch = window.innerHeight-50;
104
-
// if cw is odd, make aspect ratio correct (2:1)
105
-
if (cw%2 == 1) cw--;
106
-
107
-
// set canvas w/h
108
-
if (ch < cw/2) {
109
-
canvas.width = ch*2;
110
-
canvas.height = ch;
111
-
} else {
112
-
canvas.width = cw;
113
-
canvas.height = cw/2;
114
-
}
115
-
}
116
-
117
-
// update canvas size
118
-
resize();
119
-
// window.addEventListener("resize", function() {
120
-
// resize();
121
-
// });
122
-
123
-
var mousedown, mx, my, oldmx, oldmy, leftMargin, topMargin;
124
-
window.addEventListener("mousedown", function() {
125
-
mousedown = true;
126
-
startDraw();
127
-
});
128
-
window.addEventListener("mouseup", function() {
129
-
mousedown = false;
130
-
});
131
-
window.addEventListener("click", function() {
132
-
leftMargin = (window.innerWidth - canvas.width)/2;
133
-
topMargin = (window.innerHeight - canvas.height)/2;
134
-
mx = window.event.clientX - leftMargin;
135
-
my = window.event.clientY - topMargin;
136
-
c.moveTo(mx, my);
137
-
c.arc(mx, my, 0.5, Math.PI*2, 0);
138
-
c.stroke();
139
-
});
140
-
141
-
window.addEventListener("mousemove", function(e) {
142
-
if (mousedown) {
143
-
oldmx = mx;
144
-
oldmy = my;
145
-
leftMargin = (window.innerWidth - canvas.width)/2;
146
-
topMargin = (window.innerHeight - canvas.height)/2;
147
-
mx = window.event.clientX - leftMargin;
148
-
my = window.event.clientY - topMargin;
149
-
// if mousedown and inside canvas
150
-
draw();
151
-
}
152
-
});
153
-
154
-
function startDraw() {
155
-
c.beginPath();
156
-
c.lineWidth = 1;
157
-
c.strokeStyle = "#ffffff";
158
-
}
159
-
160
-
function draw() {
161
-
c.lineTo(mx, my);
162
-
c.stroke();
163
-
}
164
-
}
+1
-1
css/home.css
+1
-1
css/home.css
+1
-1
css/home.sass
+1
-1
css/home.sass
+1
-2
index.html
+1
-2
index.html
···
10
10
</head>
11
11
12
12
<body>
13
-
<a href="9">9. Touch drawing board</a>
14
-
<a href="8">8. Drawing board</a>
13
+
<a href="8">8. Drawing board, supports touch & mouse</a>
15
14
<a href="7">7. Three fancy loading animations</a>
16
15
<a href="5">5. and now they bounce off of each other</a>
17
16
<a href="4">4. many boucning circles with random colors, radiuses and window resize support</a>