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
many reorganization & much cleanup
author
KH
date
(Jun 14, 2017, 9:26 PM +0200)
commit
2b46cb47
2b46cb47edfb2e83fd6ffb91750755ea91faad3a
parent
0c8f7284
0c8f728415dbfedd8428de6462a53a4d3ba41a24
+199
-131
+18
1/index.html
+18
1/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>
13
+
<section class="main">
14
+
<canvas id="canvas"></canvas>
15
+
</section>
16
+
<script src="main.js"></script>
17
+
</body>
18
+
</html>
+18
1/index.php
+18
1/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>
13
+
<section class="main">
14
+
<canvas id="canvas"></canvas>
15
+
</section>
16
+
<script src="main.js"></script>
17
+
</body>
18
+
</html>
+19
1/main.js
+19
1/main.js
···
1
+
window.onload = draw;
2
+
3
+
function draw() {
4
+
// Assign canvas el to var
5
+
var c = document.getElementById("canvas");
6
+
var ctx = c.getContext("2d");
7
+
var ch = c.clientHeight;
8
+
var cw = c.clientWidth;
9
+
10
+
// fillStyle(r,g,b,alpha)
11
+
// fillRect(x,y,w,h)
12
+
13
+
ctx.fillStyle = "rgba(0, 200, 164, 1)";
14
+
var gap = 2;
15
+
ctx.fillRect(cw/2-25-gap, ch/2-25-gap, 50, 50);
16
+
17
+
ctx.fillStyle = "rgba(0, 134, 200, 1)";
18
+
ctx.fillRect(cw/2-25+gap, ch/2-25+gap, 50, 50);
19
+
}
+18
2/index.html
+18
2/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>
13
+
<section class="main">
14
+
<canvas width="300px" height="150px"></canvas>
15
+
</section>
16
+
<script src="main.js"></script>
17
+
</body>
18
+
</html>
+18
2/index.php
+18
2/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>
13
+
<section class="main">
14
+
<canvas width="300px" height="150px"></canvas>
15
+
</section>
16
+
<script src="main.js"></script>
17
+
</body>
18
+
</html>
+51
2/main.js
+51
2/main.js
···
1
+
// window.onload = draw;
2
+
var canvas = document.querySelector("canvas");
3
+
canvas.width = window.innerWidth-20;
4
+
canvas.height = window.innerHeight-20;
5
+
var c = canvas.getContext("2d");
6
+
7
+
// c.fillRect(x, y, w, h);
8
+
c.fillStyle = "#00C8A4";
9
+
c.fillRect(100, 100, 100, 100);
10
+
11
+
c.fillStyle = "#0086C8";
12
+
c.fillRect(200, 200, 100, 100);
13
+
c.fillStyle = "#C8005A";
14
+
c.fillRect(300, 300, 100, 100);
15
+
16
+
c.beginPath();
17
+
// c.moveTo(x,y);
18
+
c.moveTo(200, 100);
19
+
c.lineTo(400, 300);
20
+
c.strokeStyle = "#000000";
21
+
c.stroke();
22
+
c.fillRect(200, 100, 100, -100);
23
+
c.fillRect(300, 200, 100, -100);
24
+
c.fillRect(400, 300, 100, -100);
25
+
26
+
c.beginPath();
27
+
// c.arc(x, y, radius, startAngle, endAngle, drawCounterClockwise?)
28
+
c.strokeStyle = "#00C8A4";
29
+
// c.arc(250, 150, 50, 0, Math.PI*2, false);
30
+
c.stroke();
31
+
32
+
for (var i = 0; i < 10; i++) {
33
+
var x = Math.random() * canvas.width;
34
+
var y = Math.random() * canvas.height;
35
+
switch ( Math.ceil( Math.random()*3 ) ) {
36
+
case 1:
37
+
c.strokeStyle = "#00C8A4";
38
+
break;
39
+
case 2:
40
+
c.strokeStyle = "#dddddd";
41
+
break;
42
+
case 3:
43
+
c.strokeStyle = "#000000";
44
+
break;
45
+
}
46
+
c.lineWidth = 2;
47
+
console.log(i);
48
+
c.beginPath();
49
+
c.arc(x, y, 50, 0, Math.PI*2, false);
50
+
c.stroke();
51
+
}
+20
3/index.html
+20
3/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/global.css?r=<?=rand(0,999)?>">
10
+
<link rel="stylesheet" type="text/css" href="/css/home.css?r=<?=rand(0,999)?>">
11
+
</head>
12
+
13
+
<body>
14
+
<section class="main">
15
+
<canvas></canvas>
16
+
</section>
17
+
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
18
+
<script src="main.js"></script>
19
+
</body>
20
+
</html>
+19
3/index.php
+19
3/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>
13
+
<section class="main">
14
+
<canvas></canvas>
15
+
</section>
16
+
<!--jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
17
+
<script src="/js/home.js?r=<?rand(0,999)?>"></script>
18
+
</body>
19
+
</html>
-31
css/global.css
-31
css/global.css
···
1
-
html body { background-color: white; margin: 0px; font-family: 'Roboto', Arial, sans-serif; color: black; }
2
-
3
-
html p, html h1, html h2, html h3, html h4, html h5, html h6 { margin: 0px; font-weight: normal; }
4
-
5
-
html .metadata { display: none; }
6
-
7
-
html h1 { font-size: 50px; }
8
-
9
-
html h2 { font-size: 35px; }
10
-
11
-
html h3 { font-size: 30px; }
12
-
13
-
html h4 { font-size: 25px; }
14
-
15
-
html h5 { font-size: 20px; }
16
-
17
-
html a, html a:link, html a:visited, html a:link:active, html a:visited:active { text-decoration: none; outline: none; color: white; }
18
-
19
-
html img { display: block; }
20
-
21
-
html input:focus, html button:focus, html textarea:focus, html div, html p { outline: none; }
22
-
23
-
html input, html textarea, html button { font-family: 'Roboto', Arial, sans-serif; border: none; font-size: 16px; }
24
-
25
-
html input[type="range"] { display: none; }
26
-
27
-
html .flex-row { display: flex; justify-content: center; flex-direction: row; width: 100%; }
28
-
29
-
html .flex-col { display: flex; justify-content: center; flex-direction: column; height: 100%; }
30
-
31
-
html .invisible { visibility: none; }
-49
css/global.sass
-49
css/global.sass
···
1
-
@import "variables.sass"
2
-
// defaults
3
-
html
4
-
body
5
-
background-color: white
6
-
margin: 0px
7
-
font-family: 'Roboto', Arial, sans-serif
8
-
color: $c-text
9
-
p, h1, h2, h3, h4, h5, h6
10
-
margin: 0px
11
-
font-weight: normal
12
-
.metadata
13
-
display: none
14
-
h1
15
-
font-size: 50px
16
-
h2
17
-
font-size: 35px
18
-
h3
19
-
font-size: 30px
20
-
h4
21
-
font-size: 25px
22
-
h5
23
-
font-size: 20px
24
-
a, a:link, a:visited, a:link:active, a:visited:active
25
-
text-decoration: none
26
-
outline: none
27
-
color: white
28
-
img
29
-
display: block
30
-
input:focus, button:focus, textarea:focus, div, p
31
-
outline: none
32
-
input, textarea, button
33
-
font-family: 'Roboto', Arial, sans-serif
34
-
border: none
35
-
font-size: 16px
36
-
input[type="range"]
37
-
display: none
38
-
.flex-row
39
-
display: flex
40
-
justify-content: center
41
-
flex-direction: row
42
-
width: 100%
43
-
.flex-col
44
-
display: flex
45
-
justify-content: center
46
-
flex-direction: column
47
-
height: 100%
48
-
.invisible
49
-
visibility: none
+4
css/home.css
+4
css/home.css
···
1
+
body { background-color: white; margin: 0px; font-family: 'Roboto', Arial, sans-serif; color: black; }
2
+
3
+
body a { display: block; }
4
+
1
5
section { position: absolute; width: 100%; height: 100%; display: block; }
2
6
3
7
section canvas { position: relative; transform: translate(-50%, -50%); top: 50%; left: 50%; border: 1px solid #000000; display: block; }
+7
css/home.sass
+7
css/home.sass
-40
css/variables.sass
-40
css/variables.sass
···
1
-
// !compileOnSave
2
-
3
-
// COLOR
4
-
// material color palette gen: https://material.io/color
5
-
6
-
// Color palette
7
-
$c-primary: #00e676
8
-
$c-primary-light: #66ffa6
9
-
$c-primary-dark: #00b248
10
-
// $c-secondary: #00e676
11
-
// $c-secondary-light: #66ffa6
12
-
// $c-secondary-dark: #00b248
13
-
14
-
$c-text: black
15
-
16
-
// Palette
17
-
$bg-1: $bg-md-light-1
18
-
$bg-2: $bg-md-light-2
19
-
$bg-3: $bg-md-light-3
20
-
$bg-4: $bg-md-light-4
21
-
// BG Palette - Material Light
22
-
$bg-md-light-1: #E0E0E0 // status bar
23
-
$bg-md-light-2: #F5F5F5 // nav bar
24
-
$bg-md-light-3: #FAFAFA // bg
25
-
$bg-md-light-4: #FFFFFF // cards/dialogs
26
-
// BG Palette - Material Dark
27
-
$bg-md-dark-1: #000000 // status bar
28
-
$bg-md-dark-2: #212121 // nav bar
29
-
$bg-md-dark-3: #303030 // bg
30
-
$bg-md-dark-4: #424242 // cards/dialogs
31
-
32
-
// shadow-elevation
33
-
$shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
34
-
$shadow-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
35
-
$shadow-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)
36
-
$shadow-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
37
-
$shadow-5: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)
38
-
39
-
// transitions
40
-
$transition: .15s cubic-bezier(0.4, 0.0, 0.2, 1)
+4
-8
index.php
+4
-8
index.php
···
6
6
<title>Canvas</title>
7
7
<!--Roboto--> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
8
8
<!--Favicon: http:/#F986DF/realfavicongenerator.net -->
9
-
<link rel="stylesheet" type="text/css" href="/css/global.css<?="?r=".rand(0,999)?>">
10
-
<link rel="stylesheet" type="text/css" href="/css/home.css<?="?r=".rand(0,999)?>">
9
+
<link rel="stylesheet" type="text/css" href="/css/home.css?r=<?=rand(0,999)?>">
11
10
</head>
12
11
13
12
<body>
14
-
<section class="main">
15
-
<canvas width="300px" height="150px"></canvas>
16
-
</section>
17
-
<!--jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
18
-
<!--js.cookie--> <script src="/js/js.cookie-2.1.4.min.js"></script>
19
-
<script src="js/home.js<?="?r=".rand(0,999)?>"></script>
13
+
<a href="3">3. circle bouncing on canvas borders</a>
14
+
<a href="2">2. squares, a line and randomly positioned circles</a>
15
+
<a href="1">1. two squares</a>
20
16
</body>
21
17
</html>
js/home.js
3/main.js
js/home.js
3/main.js