Skip to content

Commit ffbe001

Browse files
author
lorossi
committed
initial commit
0 parents  commit ffbe001

File tree

8 files changed

+526
-0
lines changed

8 files changed

+526
-0
lines changed

LICENSE.md

Lines changed: 395 additions & 0 deletions
Large diffs are not rendered by default.

README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Empty HTML5 Canvas Project
2+
I got bored of creating a new document every time.
3+
4+
Contains all the needed files to create a new HTML5 page with a JS canvas inside.
5+
6+
Just clone the repo or download the last release.
7+
8+
## Credits
9+
This project is distributed under Attribution 4.0 International (CC BY 4.0) license.

css/style.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
body *, body {
2+
margin: 0;
3+
padding: 0;
4+
overflow: hidden;
5+
}
6+
7+
.container {
8+
width: 100vw;
9+
height: 100vh;
10+
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
}
15+
16+
#sketch {
17+
min-width: 300px;
18+
min-height: 300px;
19+
}

favicon.ico

1.12 KB
Binary file not shown.

index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta name="description" content="Webpage description goes here"/>
5+
<meta charset="utf-8">
6+
<title>TITLE</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
9+
<meta name="author" content="Author Name">
10+
<link rel="shortcut icon" href="favicon.ico"/>
11+
12+
<link rel="stylesheet" href="css/style.css">
13+
14+
<script src="js/jquery-3.5.1.min.js"></script>
15+
<script src="js/main.js"></script>
16+
<script src="js/sketch.js"></script>
17+
</head>
18+
19+
<body>
20+
<div class="container">
21+
<canvas id="sketch" width="900" height="900">
22+
</canvas>
23+
</div>
24+
</body>
25+
</html>

js/jquery-3.5.1.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

js/main.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/*jshint esversion: 8 */
2+
/*jshint strict: false */
3+
4+
$(document).ready(() => {
5+
canvas = $("#sketch")[0];
6+
if (canvas.getContext) {
7+
ctx = canvas.getContext("2d", {alpha: false});
8+
s = new Sketch(canvas, ctx);
9+
s.run();
10+
}
11+
});

js/sketch.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/*jshint esversion: 6 */
2+
3+
let chart, stats;
4+
let inside_points, total_points;
5+
let ctx, canvas;
6+
7+
class Sketch {
8+
constructor(canvas, ctx, fps) {
9+
this.canvas = canvas;
10+
this.ctx = ctx;
11+
this.setFps(fps);
12+
}
13+
14+
setFps(fps) {
15+
// set fps
16+
this.fps = fps || 60;
17+
// keep track of time to handle fps
18+
this.then = performance.now();
19+
// time between frames
20+
this.fps_interval = 1 / this.fps;
21+
}
22+
23+
run() {
24+
// bootstrap the sketch
25+
this.setup();
26+
// anti alias
27+
this.ctx.imageSmoothingQuality = "high";
28+
this.timeDraw();
29+
}
30+
31+
timeDraw() {
32+
// request another frame
33+
window.requestAnimationFrame(this.timeDraw.bind(this));
34+
let diff;
35+
diff = performance.now() - this.then;
36+
if (diff < this.fps_interval) {
37+
// not enough time has passed, so we request next frame and give up on this render
38+
return;
39+
}
40+
// updated last frame rendered time
41+
this.then = performance.now();
42+
// now draw
43+
this.ctx.save();
44+
this.draw();
45+
this.ctx.restore();
46+
}
47+
48+
background(color) {
49+
// reset background
50+
// reset canvas
51+
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
52+
this.ctx.restore();
53+
// set background
54+
this.ctx.fillStyle = color;
55+
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
56+
}
57+
58+
setup() {
59+
// this is ran once
60+
}
61+
62+
draw() {
63+
// this is ran continuously
64+
}
65+
}

0 commit comments

Comments
 (0)