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
MORE (small) CONVIENCE (fixes)
author
KH
date
(Jun 25, 2017, 10:28 PM +0200)
commit
805dc43d
805dc43dd4324475e1b66fb9b5ad4682c456d231
parent
beba13f4
beba13f4b4a8585c65d0a6004e0c1df44e774e97
+12
-11
+9
-8
8/main.js
+9
-8
8/main.js
···
11
11
12
12
var cw, ch;
13
13
function resize() {
14
-
cw = window.innerWidth-50;
15
-
ch = window.innerHeight-50;
14
+
cw = window.innerWidth;
15
+
ch = window.innerHeight;
16
16
// if cw is odd, make aspect ratio correct (2:1)
17
17
if (cw%2 == 1) cw--;
18
18
19
19
// set canvas w/h
20
-
if (ch < cw/2) {
21
-
ch -= 68;
20
+
if (ch < cw/2+29) {
21
+
ch -= 58;
22
22
section.style.width = ch*2+"px";
23
23
section.style.height = ch+"px";
24
24
canvas.width = ch*2;
25
25
canvas.height = ch;
26
-
section.style.left = "calc(50% - 34px)";
26
+
section.style.left = "calc(50% - 29px)";
27
27
section.style.display = "flex";
28
-
icons.style.flexDirection = "column"
28
+
icons.style.flexDirection = "column";
29
+
icons.style.marginRight = "0px";
29
30
} else {
30
-
cw -= 68;
31
+
cw -= 58;
31
32
section.style.width = cw+"px";
32
33
section.style.height = cw/2+"px";
33
34
canvas.width = cw;
34
35
canvas.height = cw/2;
35
-
section.style.top = "calc(50% - 34px)";
36
+
section.style.top = "calc(50% - 29px)";
36
37
}
37
38
}
38
39
resize();
+2
-2
css/home.css
+2
-2
css/home.css
···
14
14
15
15
body.eight canvas { touch-action: none; width: 100%; height: 100%; transform: initial; top: initial; left: initial; cursor: default; }
16
16
17
-
body.eight .icons { display: flex; justify-content: space-between; -webkit-tap-highlight-color: none; }
17
+
body.eight .icons { display: flex; justify-content: space-between; -webkit-tap-highlight-color: none; margin: 10px 10px 0px 10px; }
18
18
19
-
body.eight .icons div { width: 48px; height: 48px; margin: 10px; border-radius: 100px; background-repeat: no-repeat; background-size: 24px; background-position: center; transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; opacity: 0.8; }
19
+
body.eight .icons div { width: 48px; height: 48px; border-radius: 100px; background-repeat: no-repeat; background-size: 24px; background-position: center; transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; opacity: 0.8; }
20
20
21
21
body.eight .icons div.clear { background-image: url("../8/ic_clear_white_48px.svg"); }
22
22
+1
-1
css/home.sass
+1
-1
css/home.sass