[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
Debugg
+9
-9
+2
-2
9/index.html
+2
-2
9/index.html
···
2
2
<html>
3
3
<head>
4
4
<meta charset="utf-8">
5
-
<meta name="theme-color" content="#2B2E34">
5
+
<meta name="theme-color" content="#db5945">
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
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:#ffffff">
12
+
<body style="background-color:#2B2330">
13
13
<section class="main">
14
14
<canvas style="background-color:#303039"></canvas>
15
15
</section>
+2
-2
9/index.php
+2
-2
9/index.php
···
2
2
<html>
3
3
<head>
4
4
<meta charset="utf-8">
5
-
<meta name="theme-color" content="#2B2E34">
5
+
<meta name="theme-color" content="#db5945">
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
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:#ffffff">
12
+
<body style="background-color:#2B2330">
13
13
<section class="main">
14
14
<canvas style="background-color:#303039"></canvas>
15
15
</section>
+5
-5
9/main.js
+5
-5
9/main.js
···
2
2
// init canvas
3
3
var canvas = document.querySelector("canvas");
4
4
var c = canvas.getContext("2d");
5
-
c.lineWidth = 1;
6
-
c.strokeStyle = "#ffffff";
7
5
8
6
var cw, ch;
9
7
function resize() {
···
27
25
function getTouchPos(e) {
28
26
return {
29
27
x: e.touches[0].clientX - canvas.getBoundingClientRect().left,
30
-
y: e.touches[0].clientY - canvas.getBoundingClientRect().top,
28
+
y: e.touches[0].clientY - canvas.getBoundingClientRect().top
31
29
}
32
30
}
33
31
···
36
34
canvas.addEventListener("touchstart", function(e) {
37
35
var touch = e.touches[0];
38
36
touchPos = getTouchPos(e);
39
-
c.beginPath();
40
37
startDraw();
41
38
}, false);
42
39
// on touch up
···
54
51
55
52
function startDraw() {
56
53
console.log("start");
54
+
c.beginPath();
55
+
c.lineWidth = 1;
56
+
c.strokeStyle = "#ffffff";
57
57
drawing = true;
58
58
}
59
59
function endDraw() {
60
-
console.log("start");
60
+
console.log("end");
61
61
drawing = false;
62
62
}
63
63
function draw() {