Skip to content

Commit 7896b63

Browse files
bsmthbsmth
committed
Check in examples
1 parent ea4b9ef commit 7896b63

File tree

3 files changed

+217
-0
lines changed

3 files changed

+217
-0
lines changed

‎web-workers/offscreen-canvas-worker/index.html

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>OffscreenCanvas API</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<header>
11+
<div id="support-div">Your browser does not support OffscreenCanvas</div>
12+
</header>
13+
14+
<main>
15+
<h2>Simulate a heavy process:</h2>
16+
17+
<button onclick="fibonacci(40)">Canvas A</button>
18+
<button onclick="slowdownWorker()">Canvas B</button>
19+
20+
<div>
21+
<button>Test button</button><button>Test button</button
22+
><button>Test button</button><button>Test button</button
23+
><button>Test button</button><button>Test button</button>
24+
</div>
25+
26+
<h2>Visualization:</h2>
27+
<div class="visualisation">
28+
<div>
29+
<span class="canvas-title">Canvas A</span>
30+
<canvas id="canvas main" width="400" height="400"></canvas>
31+
</div>
32+
<div>
33+
<span class="canvas-title">Canvas B</span>
34+
<canvas id="canvas worker" width="400" height="400"></canvas>
35+
</div>
36+
</div>
37+
</main>
38+
39+
<script>
40+
document
41+
.querySelector("#support-div")
42+
.classList.add(
43+
"OffscreenCanvas" in window ? "supported" : "not-supported"
44+
);
45+
46+
document.querySelector("#support-div").innerHTML =
47+
"OffscreenCanvas" in window
48+
? "Your browser supports the OffscreenCanvas API "
49+
: "Your browser does not support OffscreenCanvas";
50+
51+
var requestAnimationFrame =
52+
window.requestAnimationFrame ||
53+
window.mozRequestAnimationFrame ||
54+
window.webkitRequestAnimationFrame ||
55+
window.msRequestAnimationFrame;
56+
57+
// Init Canvas A (running on the current page)
58+
var canvasA = document.getElementById("canvas main");
59+
var ctxA = canvasA.getContext("2d");
60+
61+
var canvasWidth = ctxA.width;
62+
var canvasHeight = ctxA.height;
63+
64+
// Redraw Canvas A text
65+
function redrawCanvasA() {
66+
ctxA.clearRect(0, 0, canvasWidth, canvasHeight);
67+
68+
// color in the background
69+
ctxA.fillStyle = "#EEEEEE";
70+
ctxA.fillRect(0, 0, canvasWidth, canvasHeight);
71+
72+
// draw the circle
73+
ctxA.beginPath();
74+
75+
var radius = 25 + 20 * Math.abs(Math.cos(angle));
76+
ctxA.arc(70, 70, radius, 0, Math.PI * 2, false);
77+
ctxA.closePath();
78+
79+
// color in the circle
80+
ctxA.fillStyle = "#006699";
81+
ctxA.fill();
82+
83+
angle += Math.PI / 64;
84+
85+
requestAnimationFrame(drawCircle);
86+
}
87+
88+
// Using the OffscreenCanvas API and starting the worker
89+
var cWorker = document
90+
.getElementById("canvas worker")
91+
.transferControlToOffscreen();
92+
var worker = new Worker("worker.js");
93+
worker.postMessage({ canvas: cWorker }, [cWorker]);
94+
95+
// Fibonacci function to add some delay to the thread
96+
function fibonacci(num) {
97+
if (num <= 1) return 1;
98+
return fibonacci(num - 1) + fibonacci(num - 2);
99+
}
100+
101+
// Initiate the slowing down of Canvas B
102+
// By sending a message to the worker
103+
function slowdownWorker() {
104+
worker.postMessage("slowDown");
105+
}
106+
</script>
107+
</body>
108+
</html>

‎web-workers/offscreen-canvas-worker/style.css

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
html,
2+
body {
3+
margin: 0;
4+
padding: 0;
5+
background: whitesmoke;
6+
font-family: Arial, Helvetica, sans-serif;
7+
}
8+
9+
#support-div {
10+
font-size: 2em;
11+
text-align: center;
12+
min-height: 1em;
13+
line-height: 1.5em;
14+
}
15+
16+
.supported {
17+
background: lightgreen;
18+
}
19+
20+
.not-supported {
21+
background: crimson;
22+
}
23+
24+
canvas {
25+
border: 1px solid black;
26+
background: #fff;
27+
}
28+
29+
.canvas-title {
30+
display: block;
31+
text-align: center;
32+
font-size: 1.4em;
33+
font-weight: bold;
34+
margin-bottom: 20px;
35+
}
36+
37+
main,
38+
footer {
39+
display: flex;
40+
align-content: center;
41+
justify-content: center;
42+
flex-direction: column;
43+
flex-wrap: wrap;
44+
text-align: center;
45+
}
46+
47+
ul {
48+
list-style: none;
49+
}
50+
51+
button {
52+
background: #acacac;
53+
padding: 10px;
54+
margin: 10px;
55+
border: 0;
56+
border-radius: 10px;
57+
color: white;
58+
font-size: 1em;
59+
}
60+
61+
button:hover {
62+
background: lightblue;
63+
}
64+
65+
.visualisation {
66+
display: flex;
67+
flex-wrap: wrap;
68+
justify-content: center;
69+
align-content: center;
70+
}
71+
72+
.visualisation>div {
73+
margin: 5px;
74+
}

‎web-workers/offscreen-canvas-worker/worker.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
var canvasB = null;
2+
var ctxWorker = null;
3+
4+
// Waiting to receive the OffScreenCanvas
5+
self.onmessage = function (e) {
6+
if (typeof e.data == "string") {
7+
for (let i = 0; i < 2000000000; i++) {}
8+
} else {
9+
canvasB = e.data.canvas;
10+
ctxWorker = canvasB.getContext("2d");
11+
12+
startCounting();
13+
}
14+
};
15+
16+
// Start the counter for Canvas B
17+
var counter = 0;
18+
function startCounting() {
19+
setInterval(function () {
20+
redrawCanvasB();
21+
counter++;
22+
}, 100);
23+
}
24+
25+
// Redraw Canvas A text
26+
function redrawCanvasB() {
27+
ctxWorker.clearRect(0, 0, canvasB.width, canvasB.height);
28+
ctxWorker.font = "16px Verdana";
29+
ctxWorker.textAlign = "center";
30+
ctxWorker.fillText(
31+
"Counting: " + counter,
32+
canvasB.width / 2,
33+
canvasB.height / 2
34+
);
35+
}

0 commit comments

Comments
 (0)