Skip to content

Commit 0929e9b

Browse files
bsmthbsmth
committed
chore: checkpoint
1 parent bdb70b0 commit 0929e9b

File tree

4 files changed

+58
-41
lines changed

4 files changed

+58
-41
lines changed

‎web-workers/offscreen-canvas-worker/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# offscreen-canvas-worker
2+
3+
This example shows how to use an `OffscreenCanvasContext` with a web worked.
4+
[View this demo live](https://mdn.github.io/dom-examples/web-workers/offscreen-canvas-worker/).
5+
6+
To run this code locally you'll need to serve it. If you have [node](https://nodejs.org/) installed, navigate to the folder containing the code and run `lite-server`:
7+
8+
```bash
9+
cd /web-workers/offscreen-canvas-worker
10+
npx lite-server
11+
```

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

Lines changed: 31 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
54
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
65
<title>OffscreenCanvas API</title>
76
<link rel="stylesheet" href="style.css" />
@@ -14,16 +13,15 @@
1413
<main>
1514
<h2>Simulate a heavy process:</h2>
1615

17-
<button onclick="fibonacci(40)">Canvas A</button>
18-
<button onclick="slowdownWorker()">Canvas B</button>
16+
<button id="main-button" onclick="slowMainThread()">Canvas A</button>
17+
<button id="worker-button" onclick="slowdownWorker()">Canvas B</button>
1918

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>
19+
<div class="ui-example">
20+
<button>Hover example</button><button>Hover example</button
21+
><button>Hover example</button><button>Hover example</button>
2422
</div>
2523

26-
<h2>Visualization:</h2>
24+
<h2>Counters:</h2>
2725
<div class="visualisation">
2826
<div>
2927
<span class="canvas-title">Canvas A</span>
@@ -48,41 +46,33 @@ <h2>Visualization:</h2>
4846
? "Your browser supports the OffscreenCanvas API "
4947
: "Your browser does not support OffscreenCanvas";
5048

51-
var requestAnimationFrame =
52-
window.requestAnimationFrame ||
53-
window.mozRequestAnimationFrame ||
54-
window.webkitRequestAnimationFrame ||
55-
window.msRequestAnimationFrame;
49+
const requestAnimationFrame = window.requestAnimationFrame;
5650

5751
// Init Canvas A (running on the current page)
58-
var canvasA = document.getElementById("canvas main");
59-
var ctxA = canvasA.getContext("2d");
52+
const canvasA = document.getElementById("canvas main");
53+
const indicator = document.getElementById("indicator");
54+
const ctxA = canvasA.getContext("2d");
6055

61-
var canvasWidth = ctxA.width;
62-
var canvasHeight = ctxA.height;
56+
const canvasWidth = ctxA.width;
57+
const canvasHeight = ctxA.height;
58+
59+
// Setup the counter for Canvas A
60+
let counter = 0;
61+
setInterval(function () {
62+
redrawCanvasA();
63+
counter++;
64+
}, 100);
6365

6466
// Redraw Canvas A text
6567
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);
68+
ctxA.clearRect(0, 0, canvasA.width, canvasA.height);
69+
ctxA.font = "16px Verdana";
70+
ctxA.textAlign = "center";
71+
ctxA.fillText(
72+
"Counter: " + counter,
73+
canvasA.width / 2,
74+
canvasA.height / 2
75+
);
8676
}
8777

8878
// Using the OffscreenCanvas API and starting the worker
@@ -98,6 +88,10 @@ <h2>Visualization:</h2>
9888
return fibonacci(num - 1) + fibonacci(num - 2);
9989
}
10090

91+
function slowMainThread() {
92+
fibonacci(42);
93+
}
94+
10195
// Initiate the slowing down of Canvas B
10296
// By sending a message to the worker
10397
function slowdownWorker() {

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,13 @@ button {
5959
}
6060

6161
button:hover {
62-
background: lightblue;
62+
background: rgb(235, 86, 41);
63+
}
64+
65+
.ui-example button:hover {
66+
transition: transform 0.5s;
67+
transform: scale(1.3, 1.3);
68+
6369
}
6470

6571
.visualisation {

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ var ctxWorker = null;
44
// Waiting to receive the OffScreenCanvas
55
self.onmessage = function (e) {
66
if (typeof e.data == "string") {
7-
for (let i = 0; i < 2000000000; i++) {}
7+
fibonacci(42);
88
} else {
99
canvasB = e.data.canvas;
1010
ctxWorker = canvasB.getContext("2d");
@@ -13,6 +13,12 @@ self.onmessage = function (e) {
1313
}
1414
};
1515

16+
// Fibonacci function to add some delay to the thread
17+
function fibonacci(num) {
18+
if (num <= 1) return 1;
19+
return fibonacci(num - 1) + fibonacci(num - 2);
20+
}
21+
1622
// Start the counter for Canvas B
1723
var counter = 0;
1824
function startCounting() {
@@ -22,13 +28,13 @@ function startCounting() {
2228
}, 100);
2329
}
2430

25-
// Redraw Canvas A text
31+
// Redraw Canvas B text
2632
function redrawCanvasB() {
2733
ctxWorker.clearRect(0, 0, canvasB.width, canvasB.height);
2834
ctxWorker.font = "16px Verdana";
2935
ctxWorker.textAlign = "center";
3036
ctxWorker.fillText(
31-
"Counting: " + counter,
37+
"Counter: " + counter,
3238
canvasB.width / 2,
3339
canvasB.height / 2
3440
);

0 commit comments

Comments
 (0)