init documentation for cancelAnimationFrame() and requestAnimationFrame() of DedicatedWorkerGlobalScope interface

files/en-us/web/api/dedicatedworkerglobalscope/cancelanimationframe/index.md

@@ -0,0 +1,92 @@
+---
+title: "DedicatedWorkerGlobalScope: cancelAnimationFrame() method"
+short-title: cancelAnimationFrame()
+slug: Web/API/DedicatedWorkerGlobalScope/cancelAnimationFrame
+page-type: web-api-instance-method
+browser-compat: api.DedicatedWorkerGlobalScope.cancelAnimationFrame
+---
+
+{{APIRef}}
+
+The **`cancelAnimationFrame()`** method of the {{domxref("DedicatedWorkerGlobalScope")}} interface cancels an animation frame request previously scheduled through a call to {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}}.
+
+Calling `cancelAnimationFrame()` method in worker requires that the method needs to be supported in current worker, which means that current worker is created by window (not worker) or current creator of the worker also support the method.
+
+## Syntax
+
+```js-nolint
+cancelAnimationFrame(handle)
+```
+
+### Parameters
+
+- `handle`
+  - : The ID value returned by the call to {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}} that requested the callback.
+
+### Return value
+
+None ({{jsxref("undefined")}}).
+
+### Exceptions
+
+- `NotSupportedError` {{domxref("DOMException")}}
+  - : Thrown if calling the method is not supported in current worker.
+
+## Examples
+
+First, in the document, transfer the control of a {{HTMLElement("canavs")}} element in document using the {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} method and send a message of "start" to the worker:
+
+```js
+const offscreenCanvas = document.querySelector("canvas").transferControlToOffscreen();
+
+worker.postMessage({
+  type: "start",
+  canvas: offscreenCanvas,
+}, [offscreenCanvas]);
+```
+
+Then, in the worker, the following code will start the animation of drawing a rectangle moving from left to right when receiving a message of "start", and stop the animation when receiving a message of "stop":
+
+```js
+let ctx, pos = 0;
+
+function draw(dt) {
+  ctx.clearRect(0, 0, 100, 100);
+  ctx.fillRect(pos, 0, 10, 10);
+  pos += 10 * dt;
+  self.requestAnimationFrame(draw);
+}
+
+self.addEventListener('message', (e) => {
+  if (e.data.type === 'start') {
+    const transferredCanvas = e.data.canvas;
+    ctx = transferredCanvas.getContext("2d");
+    self.requestAnimationFrame(draw);
+  }
+  if (e.data.type === 'stop') {
+    self.cancelAnimationFrame(handle);
+  }
+})
+```
+
+Finally, when necessary, we could send a message of "stop" to the worker to stop the animation:
+
+```js
+worker.postMessage({
+  type: "stop",
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}}
+- {{domxref("Window.requestAnimationFrame()")}}
+- {{domxref("Window.cancelAnimationFrame()")}}

files/en-us/web/api/dedicatedworkerglobalscope/index.md

@@ -26,6 +26,10 @@ _This interface inherits methods from the {{domxref("WorkerGlobalScope")}} inter
   - : Discards any tasks queued in the `WorkerGlobalScope`'s event loop, effectively closing this particular scope.
 - {{domxref("DedicatedWorkerGlobalScope.postMessage()")}}
   - : Sends a message — which can consist of `any` JavaScript object — to the parent document that first spawned the worker.
+- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}}
+  - : Discards any tasks queued in the `WorkerGlobalScope`'s event loop, effectively closing this particular scope.
+- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}}
+  - : Cancels an animation frame request previously scheduled through a call to {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}}.
 
 ## Events
 

files/en-us/web/api/dedicatedworkerglobalscope/requestanimationframe/index.md

@@ -0,0 +1,103 @@
+---
+title: "DedicatedWorkerGlobalScope: requestAnimationFrame() method"
+short-title: requestAnimationFrame()
+slug: Web/API/DedicatedWorkerGlobalScope/requestAnimationFrame
+page-type: web-api-instance-method
+browser-compat: api.DedicatedWorkerGlobalScope.requestAnimationFrame
+---
+
+{{APIRef}}
+
+The **`requestAnimationFrame()`** method of the {{domxref("DedicatedWorkerGlobalScope")}} interface tells the browser you wish to perform an animation and call a user-supplied callback function before the next repaint.
+
+Calling `requestAnimationFrame()` method in worker requires that the method needs to be supported in current worker, which means that current worker is created by window (not worker) or current creator of the worker also support the method.
+
+The frequency of calls to the callback function will generally match the display refresh rate. The most common refresh rate is 60hz, (60 cycles/frames per second), though 75hz, 120hz, and 144hz are also widely used. `requestAnimationFrame()` calls are paused in most browsers when running in background tabs or hidden {{HTMLElement("iframe")}}s, in order to improve performance and battery life.
+
+Your callback function must call `requestAnimationFrame()` again if you want to animate another frame. `requestAnimationFrame()` is one-shot.
+
+> **Warning:** Be sure always to use the first argument (or some other method for getting the current time) to calculate how much the animation will progress in a frame — **otherwise, the animation will run faster on high refresh-rate screens**. For ways to do that, see the examples below.
+
+## Syntax
+
+```js-nolint
+requestAnimationFrame(callback)
+```
+
+### Parameters
+
+- `callback`
+  - The function to call when it's time to update your animation for the next repaint. This callback function is passed a single argument: a {{domxref("DOMHighResTimeStamp")}} indicating the end time of the previous frame's rendering (based on the number of milliseconds since [time origin](/en-US/docs/Web/API/DOMHighResTimeStamp#the_time_origin)).
+  - The timestamp is a decimal number, in milliseconds, but with a minimal precision of 1 millisecond. The timestamp value is also similar to calling {{domxref('performance.now()')}} at the start of the callback function, but it is never the same value.
+  - When multiple callbacks queued by `requestAnimationFrame()` begin to fire in a single frame, each receives the same timestamp even though time has passed during the computation of every previous callback's workload.
+
+### Return value
+
+A `long` integer value as the request ID that uniquely identifies the entry
+in the callback list. This is a non-zero value, but you may not make any other
+assumptions about its value. You can pass this value to
+{{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()", "cancelAnimationFrame()")}} to cancel the refresh callback request.
+
+### Exceptions
+
+- `NotSupportedError` {{domxref("DOMException")}}
+  - : Thrown if calling the method is not supported in current worker.
+
+## Examples
+
+First, in the document, transfer the control of a {{HTMLElement("canavs")}} element in document using the {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} method and send a message of "start" to the worker:
+
+```js
+const offscreenCanvas = document.querySelector("canvas").transferControlToOffscreen();
+
+worker.postMessage({
+  type: "start",
+  canvas: offscreenCanvas,
+}, [offscreenCanvas]);
+```
+
+Then, in the worker, the following code will start the animation of drawing a rectangle moving from left to right when receiving a message of "start", and stop the animation when receiving a message of "stop":
+
+```js
+let ctx, pos = 0;
+
+function draw(dt) {
+  ctx.clearRect(0, 0, 100, 100);
+  ctx.fillRect(pos, 0, 10, 10);
+  pos += 10 * dt;
+  self.requestAnimationFrame(draw);
+}
+
+self.addEventListener('message', (e) => {
+  if (e.data.type === 'start') {
+    const transferredCanvas = e.data.canvas;
+    ctx = transferredCanvas.getContext("2d");
+    self.requestAnimationFrame(draw);
+  }
+  if (e.data.type === 'stop') {
+    self.cancelAnimationFrame(handle);
+  }
+})
+```
+
+Finally, when necessary, we could send a message of "stop" to the worker to stop the animation:
+
+```js
+worker.postMessage({
+  type: "stop",
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}}
+- {{domxref("Window.requestAnimationFrame()")}}
+- {{domxref("Window.cancelAnimationFrame()")}}