Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ff105 offscreen not experimental #21098

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,7 @@ browser-compat: api.CanvasRenderingContext2D.getTransform

{{APIRef}}

The
**`CanvasRenderingContext2D.getTransform()`**
method of the Canvas 2D API retrieves the current transformation matrix being applied to
the context.
The **`CanvasRenderingContext2D.getTransform()`** method of the Canvas 2D API retrieves the current transformation matrix being applied to the context.

## Syntax

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,10 @@ tags:
- Event
- Reference
- Canvas
- Experimental
browser-compat: api.HTMLCanvasElement.contextlost_event
---

{{APIRef}}{{SeeCompatTable}}
{{APIRef}}

The **`contextlost`** event of the [Canvas API](/en-US/docs/Web/API/Canvas_API) is fired if the user agent detects that the backing storage associated with a [`CanvasRenderingContext2D`](/en-US/docs/Web/API/CanvasRenderingContext2D) context is lost.
Contexts can be lost for several reasons like driver crashes or the application runs out of memory, etc.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,10 @@ tags:
- Event
- Reference
- Canvas
- Experimental
browser-compat: api.HTMLCanvasElement.contextrestored_event
---

{{APIRef}}{{SeeCompatTable}}
{{APIRef}}

The **`contextrestored`** event of the [Canvas API](/en-US/docs/Web/API/Canvas_API) is fired if the user agent restores the backing storage for a [`CanvasRenderingContext2D`](/en-US/docs/Web/API/CanvasRenderingContext2D).

Expand Down
6 changes: 3 additions & 3 deletions files/en-us/web/api/htmlcanvaselement/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,16 +42,16 @@ _Inherits methods from its parent, {{domxref("HTMLElement")}}._
- : Returns a data-URL containing a representation of the image in the format specified by the `type` parameter (defaults to `png`). The returned image is in a resolution of 96dpi.
- {{domxref("HTMLCanvasElement.toBlob()")}}
- : Creates a {{domxref("Blob")}} object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.
- {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}
- {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}}
- : Transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.

## Events

Listen to these events using [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener).

- [`contextlost`](/en-US/docs/Web/API/HTMLCanvasElement/contextlost_event) {{Experimental_Inline}}
- [`contextlost`](/en-US/docs/Web/API/HTMLCanvasElement/contextlost_event)
- : Fired if the user agent detects that the backing storage associated with a `CanvasRenderingContext2D` or an `OffscreenCanvasRenderingContext2D` context has been lost.
- [`contextrestored`](/en-US/docs/Web/API/HTMLCanvasElement/contextrestored_event) {{Experimental_Inline}}
- [`contextrestored`](/en-US/docs/Web/API/HTMLCanvasElement/contextrestored_event)
- : Fired if the user agent successfully restores a `CanvasRenderingContext2D` or an `OffscreenCanvasRenderingContext2D` context.
- [`webglcontextcreationerror`](/en-US/docs/Web/API/HTMLCanvasElement/webglcontextcreationerror_event)
- : Fired if the user agent is unable to create a `WebGLRenderingContext` or `WebGL2RenderingContext` context.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,16 @@ slug: Web/API/HTMLCanvasElement/transferControlToOffscreen
page-type: web-api-instance-method
tags:
- API
- Experimental
- HTMLCanvasElement
- Method
- OffscreenCanvas
- Reference
browser-compat: api.HTMLCanvasElement.transferControlToOffscreen
---

{{APIRef("Canvas API")}} {{SeeCompatTable}}
{{APIRef("Canvas API")}}

The
**`HTMLCanvasElement.transferControlToOffscreen()`**
method transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main
thread or on a worker.
The **`HTMLCanvasElement.transferControlToOffscreen()`** method transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.

## Syntax

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,13 @@ page-type: web-api-instance-method
tags:
- API
- Canvas
- Experimental
- Method
- OffscreenCanvas
- Reference
browser-compat: api.OffscreenCanvas.convertToBlob
---

{{APIRef("Canvas API")}} {{SeeCompatTable}}
{{APIRef("Canvas API")}}

The **`OffscreenCanvas.convertToBlob()`** method creates a {{domxref("Blob")}} object representing the image contained in the canvas.

Expand Down
7 changes: 3 additions & 4 deletions files/en-us/web/api/offscreencanvas/getcontext/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,13 @@ page-type: web-api-instance-method
tags:
- API
- Canvas
- Experimental
- Method
- OffscreenCanvas
- Reference
browser-compat: api.OffscreenCanvas.getContext
---

{{APIRef("Canvas API")}} {{SeeCompatTable}}
{{APIRef("Canvas API")}}

The **`OffscreenCanvas.getContext()`** method returns a drawing context for an offscreen canvas, or [`null`](/en-US/docs/Web/JavaScript/Reference/Operators/null) if the context identifier is not supported.

Expand All @@ -33,7 +32,7 @@ getContext(contextType, contextAttributes)
- `webgl`
- : Creates a {{domxref("WebGLRenderingContext")}} object representing a three-dimensional rendering context.
This context is only available on browsers that implement [WebGL](/en-US/docs/Web/API/WebGL_API) version 1 (OpenGL ES 2.0).
- `webgl2` {{experimental_inline}}
- `webgl2`
- : Creates a {{domxref("WebGL2RenderingContext")}} object representing a three-dimensional rendering context.
This context is only available on browsers that implement [WebGL](/en-US/docs/Web/API/WebGL_API) version 2 (OpenGL ES 3.0).
- `bitmaprenderer`
Expand All @@ -55,7 +54,7 @@ getContext(contextType, contextAttributes)

- `alpha`
- : Boolean that indicates if the canvas contains an alpha channel. If set to `false`, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images then.
- `willReadFrequently` {{non-standard_inline}} (Gecko only)
- `willReadFrequently` {{non-standard_inline}} (Firefox only)
- : Boolean that indicates whether or not a lot of read-back operations are planned.
This will force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} frequently.
This option is only available, if the flag `gfx.canvas.willReadFrequently.enable` is set to `true` (which, by default, is only the case for B2G/Firefox OS).
Expand Down
9 changes: 3 additions & 6 deletions files/en-us/web/api/offscreencanvas/height/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,21 @@ page-type: web-api-instance-property
tags:
- API
- Canvas
- Experimental
- OffscreenCanvas
- Property
- Reference
browser-compat: api.OffscreenCanvas.height
---

{{APIRef("Canvas API")}} {{SeeCompatTable}}
{{APIRef("Canvas API")}}

The **`height`** property returns and sets the height of an
{{domxref("OffscreenCanvas")}} object.
The **`height`** property returns and sets the height of an {{domxref("OffscreenCanvas")}} object.

## Value

## Examples

Creating a new offscreen canvas and returning or setting the height of the offscreen
canvas:
Creating a new offscreen canvas and returning or setting the height of the offscreen canvas:

```js
const offscreen = new OffscreenCanvas(256, 256);
Expand Down
3 changes: 1 addition & 2 deletions files/en-us/web/api/offscreencanvas/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,10 @@ tags:
- Canvas
- Interface
- Reference
- Experimental
browser-compat: api.OffscreenCanvas
---

{{APIRef("Canvas API")}}{{SeeCompatTable}}
{{APIRef("Canvas API")}}

When using the {{HtmlElement("canvas")}} element or the [Canvas API](/en-US/docs/Web/API/Canvas_API), rendering, animation, and user interaction usually happen on the main execution thread of a web application.
The computation relating to canvas animations and rendering can have a significant impact on application performance.
Expand Down
12 changes: 4 additions & 8 deletions files/en-us/web/api/offscreencanvas/offscreencanvas/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,15 @@ tags:
- API
- Canvas
- Constructor
- Experimental
- OffscreenCanvas
- Reference
- WebGL
browser-compat: api.OffscreenCanvas.OffscreenCanvas
---

{{APIRef("Canvas API")}} {{SeeCompatTable}}
{{APIRef("Canvas API")}}

The **`OffscreenCanvas()`** constructor returns a newly
instantiated {{domxref("OffscreenCanvas")}} object.
The **`OffscreenCanvas()`** constructor returns a newly instantiated {{domxref("OffscreenCanvas")}} object.

## Syntax

Expand All @@ -33,10 +31,8 @@ new OffscreenCanvas(width, height)

## Examples

This example creates a new offscreen canvas using the `OffscreenCanvas()`
constructor. We then initialize a [WebGL](/en-US/docs/Web/API/WebGL_API)
context on it using the {{domxref("OffscreenCanvas.getContext()", "getContext()")}}
method.
This example creates a new offscreen canvas using the `OffscreenCanvas()` constructor.
We then initialize a [WebGL](/en-US/docs/Web/API/WebGL_API) context on it using the {{domxref("OffscreenCanvas.getContext()", "getContext()")}} method.

```js
const offscreen = new OffscreenCanvas(256, 256);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,15 @@ page-type: web-api-instance-method
tags:
- API
- Canvas
- Experimental
- Method
- OffscreenCanvas
- Reference
browser-compat: api.OffscreenCanvas.transferToImageBitmap
---

{{APIRef("Canvas API")}} {{SeeCompatTable}}
{{APIRef("Canvas API")}}

The **`OffscreenCanvas.transferToImageBitmap()`** method
creates an {{domxref("ImageBitmap")}} object from the most recently rendered image of
the `OffscreenCanvas`.
The **`OffscreenCanvas.transferToImageBitmap()`** method creates an {{domxref("ImageBitmap")}} object from the most recently rendered image of the `OffscreenCanvas`.

## Syntax

Expand Down
9 changes: 3 additions & 6 deletions files/en-us/web/api/offscreencanvas/width/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,21 @@ page-type: web-api-instance-property
tags:
- API
- Canvas
- Experimental
- OffscreenCanvas
- Property
- Reference
browser-compat: api.OffscreenCanvas.width
---

{{APIRef("Canvas API")}} {{SeeCompatTable}}
{{APIRef("Canvas API")}}

The **`width`** property returns and sets the width of an
{{domxref("OffscreenCanvas")}} object.
The **`width`** property returns and sets the width of an {{domxref("OffscreenCanvas")}} object.

## Value

## Examples

Creating a new offscreen canvas and returning or setting the width of the offscreen
canvas:
Creating a new offscreen canvas and returning or setting the width of the offscreen canvas:

```js
const offscreen = new OffscreenCanvas(256, 256);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ The following methods can be used to manipulate paths of objects.

Objects in the `CanvasRenderingContext2D` rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("DOMMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.

- {{domxref("CanvasRenderingContext2D.getTransform()")}} {{Experimental_Inline}}
- {{domxref("CanvasRenderingContext2D.getTransform()")}}
- : Retrieves the current transformation matrix being applied to the context.
- {{domxref("CanvasRenderingContext2D.rotate()")}}
- : Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
Expand Down