You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
On the main thread, we start by transferring the control of a {{HTMLElement("canvas")}} element to an {{domxref("OffscreenCanvas")}}, using {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} and send to a message to `"start"` its work to the worker, with the offscreen canvas:
37
+
Here's a complete example showing how to use `requestAnimationFrame()` in a dedicated worker with an `OffscreenCanvas`.
38
+
39
+
The HTML should contain:
40
+
41
+
```html
42
+
<canvaswidth="100"height="100"></canvas>
43
+
```
44
+
45
+
It should link to the following JavaScript:
38
46
39
47
```js
48
+
constworker=newWorker("worker.js");
49
+
50
+
// Transfer canvas control to the worker
40
51
constoffscreenCanvas=document
41
52
.querySelector("canvas")
42
53
.transferControlToOffscreen();
43
54
55
+
// Start the animation
44
56
worker.postMessage(
45
57
{
46
58
type:"start",
47
59
canvas: offscreenCanvas,
48
60
},
49
61
[offscreenCanvas],
50
62
);
63
+
64
+
// Stop the animation after 5 seconds
65
+
setTimeout(() => {
66
+
worker.postMessage({
67
+
type:"stop",
68
+
});
69
+
}, 5000);
51
70
```
52
71
53
-
When receiving the `"start"` message, the worker starts the animation, moving the rectangle from left to right. Upon reception of a `"stop"` message, it will stop the animation.
72
+
**worker.js:**
54
73
55
74
```js
56
75
let ctx;
57
76
let pos =0;
77
+
let animationId;
78
+
let isRunning =false;
79
+
let lastTime =0;
80
+
81
+
functiondraw(currentTime) {
82
+
if (!isRunning) return;
58
83
59
-
functiondraw(dt) {
84
+
// Calculate delta time for smooth animation
85
+
if (lastTime ===0) lastTime = currentTime;
86
+
constdeltaTime= (currentTime - lastTime) /1000;
87
+
lastTime = currentTime;
88
+
89
+
// Clear and draw the moving rectangle
60
90
ctx.clearRect(0, 0, 100, 100);
61
91
ctx.fillRect(pos, 0, 10, 10);
62
-
pos +=10* dt;
63
-
self.requestAnimationFrame(draw);
92
+
pos +=50* deltaTime; // Move 50 pixels per second
93
+
94
+
// Loop the animation
95
+
if (pos >100) pos =-10;
96
+
97
+
animationId =self.requestAnimationFrame(draw);
64
98
}
65
99
66
100
self.addEventListener("message", (e) => {
67
101
if (e.data.type==="start") {
68
102
consttransferredCanvas=e.data.canvas;
69
103
ctx =transferredCanvas.getContext("2d");
70
-
self.requestAnimationFrame(draw);
104
+
isRunning =true;
105
+
lastTime =0;
106
+
animationId =self.requestAnimationFrame(draw);
71
107
}
72
108
if (e.data.type==="stop") {
73
-
self.cancelAnimationFrame(handle);
109
+
isRunning =false;
110
+
if (animationId) {
111
+
self.cancelAnimationFrame(animationId);
112
+
}
74
113
}
75
114
});
76
115
```
77
116
78
-
Finally, if needed, the main thread can send a `"stop"`message to the worker to stop the animation:
117
+
On the main thread, we start by transferring the control of a {{HTMLElement("canvas")}} element to an {{domxref("OffscreenCanvas")}}, using {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} and send a message to `"start"`its work to the worker, with the offscreen canvas.
79
118
80
-
```js
81
-
worker.postMessage({
82
-
type:"stop",
83
-
});
84
-
```
119
+
In the worker file (`worker.js`), we handle the animation logic. When receiving the `"start"` message, the worker starts the animation, moving the rectangle from left to right. Upon reception of a `"stop"` message, it will stop the animation.
120
+
121
+
Finally, the main thread can send a `"stop"` message to the worker to stop the animation after a delay, allowing the animation to be visible before stopping.
Copy file name to clipboardExpand all lines: files/en-us/web/api/dedicatedworkerglobalscope/requestanimationframe/index.md
+50-14Lines changed: 50 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -48,55 +48,91 @@ assumptions about it. You can pass this value to
48
48
49
49
## Examples
50
50
51
-
On the main thread, we start by transferring the control of a {{HTMLElement("canvas")}} element to an {{domxref("OffscreenCanvas")}}, using {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}}, then send a message to the worker to `"start"` its work with the offscreen canvas:
51
+
Here's a complete example showing how to use `requestAnimationFrame()` in a dedicated worker with an `OffscreenCanvas`.
52
+
53
+
The HTML should contain:
54
+
55
+
```html
56
+
<canvaswidth="100"height="100"></canvas>
57
+
```
58
+
59
+
It should link to the following JavaScript:
52
60
53
61
```js
62
+
constworker=newWorker("worker.js");
63
+
64
+
// Transfer canvas control to the worker
54
65
constoffscreenCanvas=document
55
66
.querySelector("canvas")
56
67
.transferControlToOffscreen();
57
68
69
+
// Start the animation
58
70
worker.postMessage(
59
71
{
60
72
type:"start",
61
73
canvas: offscreenCanvas,
62
74
},
63
75
[offscreenCanvas],
64
76
);
77
+
78
+
// Stop the animation after 5 seconds
79
+
setTimeout(() => {
80
+
worker.postMessage({
81
+
type:"stop",
82
+
});
83
+
}, 5000);
65
84
```
66
85
67
-
When receiving the `"start"` message, the worker starts the animation, moving the rectangle from left to right. Upon reception of a `"stop"` message, it will stop the animation.
86
+
**worker.js:**
68
87
69
88
```js
70
89
let ctx;
71
90
let pos =0;
72
-
let handle;
91
+
let animationId;
92
+
let isRunning =false;
93
+
let lastTime =0;
94
+
95
+
functiondraw(currentTime) {
96
+
if (!isRunning) return;
73
97
74
-
functiondraw(dt) {
98
+
// Calculate delta time for smooth animation
99
+
if (lastTime ===0) lastTime = currentTime;
100
+
constdeltaTime= (currentTime - lastTime) /1000;
101
+
lastTime = currentTime;
102
+
103
+
// Clear and draw the moving rectangle
75
104
ctx.clearRect(0, 0, 100, 100);
76
105
ctx.fillRect(pos, 0, 10, 10);
77
-
pos +=10* dt;
78
-
handle =self.requestAnimationFrame(draw);
106
+
pos +=50* deltaTime; // Move 50 pixels per second
107
+
108
+
// Loop the animation
109
+
if (pos >100) pos =-10;
110
+
111
+
animationId =self.requestAnimationFrame(draw);
79
112
}
80
113
81
114
self.addEventListener("message", (e) => {
82
115
if (e.data.type==="start") {
83
116
consttransferredCanvas=e.data.canvas;
84
117
ctx =transferredCanvas.getContext("2d");
85
-
handle =self.requestAnimationFrame(draw);
118
+
isRunning =true;
119
+
lastTime =0;
120
+
animationId =self.requestAnimationFrame(draw);
86
121
}
87
122
if (e.data.type==="stop") {
88
-
self.cancelAnimationFrame(handle);
123
+
isRunning =false;
124
+
if (animationId) {
125
+
self.cancelAnimationFrame(animationId);
126
+
}
89
127
}
90
128
});
91
129
```
92
130
93
-
Finally, if needed, the main thread can send a `"stop"`message to the worker to stop the animation:
131
+
On the main thread, we start by transferring the control of a {{HTMLElement("canvas")}} element to an {{domxref("OffscreenCanvas")}}, using {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} and send a message to `"start"`its work to the worker, with the offscreen canvas.
94
132
95
-
```js
96
-
worker.postMessage({
97
-
type:"stop",
98
-
});
99
-
```
133
+
In the worker file (`worker.js`), we handle the animation logic. When receiving the `"start"` message, the worker starts the animation, moving the rectangle from left to right. Upon reception of a `"stop"` message, it will stop the animation.
134
+
135
+
Finally, the main thread can send a `"stop"` message to the worker to stop the animation after a delay, allowing the animation to be visible before stopping.
0 commit comments