diff --git a/source b/source index c09d97c6242..af3416053cf 100644 --- a/source +++ b/source @@ -64497,8 +64497,9 @@ callback BlobCallback = undefined (Blob? blob);
Uses HTMLCanvasElement.
-

The canvas element provides scripts with a resolution-dependent bitmap canvas, - which can be used for rendering graphs, game graphics, art, or other visual images on the fly.

+

The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, + art, or other visual images on the fly.

Authors should not use the canvas element in a document when a more suitable element is available. For example, it is inappropriate to use a canvas element to @@ -64508,23 +64509,25 @@ callback BlobCallback = undefined (Blob? blob);

When authors use the canvas element, they must also provide content that, when presented to the user, conveys essentially the same function or purpose as the - canvas's bitmap. This content may be placed as content of the canvas - element. The contents of the canvas element, if any, are the element's fallback - content.

+ canvas's bitmap. This content may be placed as + content of the canvas element. The contents of the canvas element, if + any, are the element's fallback content.

In interactive visual media, if scripting is enabled for the canvas element, and if support for canvas elements has been enabled, then the canvas element represents embedded content - consisting of a dynamically created image, the element's bitmap.

+ consisting of a dynamically created image, the element's bitmap.

In non-interactive, static, visual media, if the canvas element has been previously associated with a rendering context (e.g. if the page was viewed in an interactive visual medium and is now being printed, or if some script that ran during the page layout process painted on the element), then the canvas element represents - embedded content with the element's current bitmap and size. Otherwise, the element - represents its fallback content instead.

+ embedded content with the element's current bitmap and size. Otherwise, the element represents its + fallback content instead.

In non-visual media, and in visual media if scripting is disabled for the canvas element or if support for canvas elements @@ -64547,16 +64550,16 @@ callback BlobCallback = undefined (Blob? blob);

-

The canvas element has two attributes to control the size of the element's bitmap: - width and height. These attributes, - when specified, must have values that are valid - non-negative integers. The rules for parsing non-negative - integers must be used to obtain their numeric - values. If an attribute is missing, or if parsing its value returns an error, then the - default value must be used instead. The width - attribute defaults to 300, and the height attribute - defaults to 150.

+

The canvas element has two attributes to control the size of the element's bitmap: width and height. These attributes, when specified, must have + values that are valid non-negative integers. + The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or + if parsing its value returns an error, then the default value must be used instead. The + width attribute defaults to 300, and the height attribute defaults to 150.

When setting the value of the width or height attribute, if the BlobCallback = undefined (Blob? blob); and leave the attribute's value unchanged.

The natural dimensions of the canvas element when it - represents embedded content are equal to the dimensions of the - element's bitmap.

+ represents embedded content are equal to the dimensions of the element's + bitmap.

The user agent must use a square pixel density consisting of one pixel of image data per - coordinate space unit for the bitmaps of a canvas and its rendering contexts.

+ coordinate space unit for the canvas element's bitmap and the bitmaps of its rendering context.

A canvas element can be sized arbitrarily by a style sheet, its - bitmap is then subject to the 'object-fit' CSS property.

+ bitmap is then subject to the 'object-fit' CSS + property.

-

The bitmaps of canvas elements, the bitmaps of ImageBitmap objects, - as well as some of the bitmaps of rendering contexts, such as those described in the sections on - the CanvasRenderingContext2D and ImageBitmapRenderingContext objects - below, have an origin-clean flag, which can be - set to true or false. Initially, when the canvas element or ImageBitmap +

The bitmaps of canvas elements, the bitmaps of + ImageBitmap objects, as well as some of the bitmaps of rendering contexts, such as + those described in the sections on the CanvasRenderingContext2D and + ImageBitmapRenderingContext objects below, have an origin-clean flag, which can be set to true or false. + Initially, when the canvas element or ImageBitmap object is created, its bitmap's origin-clean flag must be set to true.

@@ -64601,13 +64607,13 @@ callback BlobCallback = undefined (Blob? blob);

When its canvas context mode is none, a canvas element has no rendering context, - and its bitmap must be transparent black with a natural width equal - to the numeric value of the element's width attribute and a natural height equal to - the numeric value of the element's height attribute, those values being interpreted in CSS pixels, and being updated as the attributes are set, changed, or - removed.

+ and its bitmap must be transparent black with a + natural width equal to the numeric value + of the element's width attribute and a natural + height equal to the numeric value of the + element's height attribute, those values being + interpreted in CSS pixels, and being updated as the attributes are set, + changed, or removed.

When its canvas context mode is placeholder, a canvas element has no @@ -64617,7 +64623,8 @@ callback BlobCallback = undefined (Blob? blob);

When a canvas element represents embedded content, it provides a paint source whose width is the element's natural width, whose height - is the element's natural height, and whose appearance is the element's bitmap.

+ is the element's natural height, and whose appearance is the element's bitmap.

Whenever the width and height content attributes are set, removed, changed, or @@ -64923,15 +64930,19 @@ callback BlobCallback = undefined (Blob? blob); when invoked, must run these steps:

    -

  1. If this canvas element's bitmap's

    If this canvas element's rendering context's layer count is not 0, then throw an + "InvalidStateError" DOMException.

    + +

  2. If this canvas element's bitmap's origin-clean flag is set to false, then throw a "SecurityError" DOMException.

    -

  3. If this canvas element's bitmap has no pixels (i.e. either its horizontal - dimension or its vertical dimension is zero) then return the string "data:,". (This is the shortest data: URL; it represents the empty string in a text/plain resource.)

    4. +

  4. If this canvas element's bitmap has no + pixels (i.e., either its horizontal dimension or its vertical dimension is 0) then return "data:,". (This is the shortest data: + URL; it represents the empty string in a text/plain + resource.)

  5. Let file be a serialization of this canvas element's bitmap as a file, passing @@ -64951,15 +64962,20 @@ callback BlobCallback = undefined (Blob? blob); quality) method, when invoked, must run these steps:

      -

    1. If this canvas element's bitmap's

      If this canvas element's rendering context's layer count is not 0, then throw an + "InvalidStateError" DOMException.

      + +

    2. If this canvas element's bitmap's origin-clean flag is set to false, then throw a "SecurityError" DOMException.

    3. Let result be null.

      4. -

    4. If this canvas element's bitmap has pixels (i.e., neither its horizontal - dimension nor its vertical dimension is zero), then set result to a copy of this - canvas element's bitmap. +

    5. If this canvas element's bitmap has + pixels (i.e., neither its horizontal dimension nor its vertical dimension is zero), then set + result to a copy of this canvas element's bitmap.

    6. Run these steps in parallel:

      @@ -65050,6 +65066,7 @@ interface CanvasRenderingContext2D { CanvasRenderingContext2DSettings getContextAttributes(); }; CanvasRenderingContext2D includes CanvasState; +CanvasRenderingContext2D includes CanvasLayers; CanvasRenderingContext2D includes CanvasTransform; CanvasRenderingContext2D includes CanvasCompositing; CanvasRenderingContext2D includes CanvasImageSmoothing; @@ -65074,6 +65091,12 @@ interface mixin CanvasState { boolean isContextLost(); // return whether context is lost }; +interface mixin CanvasLayers { + // layers + undefined beginLayer(); + undefined endLayer(); +}; + interface mixin CanvasTransform { // transformations (default transform is the identity matrix) undefined scale(unrestricted double x, unrestricted double y); @@ -65357,12 +65380,26 @@ interface Path2D {
      -

      A CanvasRenderingContext2D object has an output bitmap that - is initialized when the object is created.

      +

      A CanvasRenderingContext2D object has a top-level output bitmap and a + current output bitmap which both originally refer to the same output bitmap + that is initialized when the CanvasRenderingContext2D is created. The + top-level output bitmap is an alias for the canvas element's bitmap and is the bitmap that gets presented to the user in the update the + rendering step of the event loop. The current output bitmap is + the bitmap to which most CanvasRenderingContext2D operations are drawing.

      -

      The output bitmap has an The CanvasRenderingContext2D's current output bitmap can be replaced + and restored by calls to beginLayer() and endLayer(), with the drawing state stack + keeping track of all active nested output bitmaps. The + CanvasRenderingContext2D object has a layer count integer that is initially 0, keeping track + of the number of opened nested layers.

      + +

      The output bitmap objects have an origin-clean flag, which can be set to true or false. - Initially, when one of these bitmaps is created, its origin-clean flag must be set to true.

      The CanvasRenderingContext2D object also has an Path2D { always results in opaque black pixels, every fourth byte from getImageData() is always 255, the putImageData() method effectively ignores every - fourth byte in its input, and so on. However, the alpha component of styles and images drawn - onto the canvas are still honoured up to the point where they would impact the output - bitmap's alpha channel; for instance, drawing a 50% transparent white square on a freshly - created output bitmap with its alpha set - to false will result in a fully-opaque gray square.

      + fourth byte in its input, and so on. However, the alpha component of styles, images, and layers + drawn onto the canvas are still honored up to the point where they would impact the + top-level output bitmap's alpha channel; for instance, drawing a 50% transparent + white square on a freshly created top-level output bitmap with its alpha set to false will result in a fully-opaque gray + square.

      The CanvasRenderingContext2D object also has a desynchronized boolean. When a @@ -65412,9 +65450,9 @@ interface Path2D { may optimize the canvas for readback operations.

      On most devices the user agent needs to decide whether to store the canvas's - output bitmap on the GPU (this is also called "hardware accelerated"), or on the CPU - (also called "software"). Most rendering operations are more performant for accelerated canvases, - with the major exception being readback with output bitmaps on the GPU (this is also called "hardware + accelerated"), or on the CPU (also called "software"). Most rendering operations are more + performant for accelerated canvases, with the major exception being readback with getImageData(), toDataURL(), or toBlob(). CanvasRenderingContext2D objects with @@ -65426,7 +65464,7 @@ interface Path2D { data-x="concept-canvas-color-space">color space setting of type PredefinedColorSpace. The CanvasRenderingContext2D object's color space indicates the color space for the - output bitmap.

      + context's output bitmaps.

      The getContextAttributes() method @@ -65446,9 +65484,10 @@ interface Path2D { Cartesian surface whose origin (0,0) is at the top left corner, with the coordinate space having x values increasing when going right, and y values increasing when going down. The x-coordinate of the right-most edge is equal to the width of the rendering - context's output bitmap in CSS pixels; similarly, the - y-coordinate of the bottom-most edge is equal to the height of the rendering context's - output bitmap in CSS pixels.

      + context's top-level output bitmap in CSS pixels; + similarly, the y-coordinate of the bottom-most edge is equal to the height of the + rendering context's top-level output bitmap in CSS + pixels.

      The size of the coordinate space does not necessarily represent the size of the actual bitmaps that the user agent will use internally or during rendering. On high-definition displays, for @@ -65459,13 +65498,13 @@ interface Path2D {

      Using CSS pixels to describe the size of a rendering context's - output bitmap does not mean that when rendered the canvas will cover an equivalent - area in CSS pixels. CSS pixels are reused - for ease of integration with CSS features, such as text layout.

      + top-level output bitmap does not mean that when rendered the canvas will cover an + equivalent area in CSS pixels. CSS pixels + are reused for ease of integration with CSS features, such as text layout.

      In other words, the canvas element below's rendering context has a 200x200 - output bitmap (which internally uses CSS pixels as a - unit for ease of integration with CSS) and is rendered as 100x100 CSS + top-level output bitmap (which internally uses CSS pixels + as a unit for ease of integration with CSS) and is rendered as 100x100 CSS pixels: 

      <canvas width=200 height=200 style=width:100px;height:100px>
      @@ -65486,8 +65525,9 @@ interface Path2D {

    7. Initialize context's canvas attribute to point to target.

      8. -

    8. Set context's output bitmap to the same bitmap as - target's bitmap (so that they are shared).

      9. +

    9. Set context's top-level output bitmap and current output + bitmap to the same bitmap as target's bitmap (so that they are shared).

    10. Set bitmap dimensions to the numeric values of target's Path2D {

      1. Reset the rendering context to its default state.

        2. -

      2. Resize the output bitmap to the new width and +

      3. Resize the top-level output bitmap to the new width and height.

      4. Let canvas be the canvas element to which the rendering @@ -65634,16 +65674,23 @@ context.fillRect(100,0,50,50); // only this square remains -

        The output bitmap, when it is not directly displayed by the user agent, +

        The top-level output bitmap, when it is not directly displayed by the user agent, implementations can, instead of updating this bitmap, merely remember the sequence of drawing operations that have been applied to it until such time as the bitmap's actual data is needed (for example because of a call to drawImage(), or the createImageBitmap() factory method). In many cases, this will be more memory efficient.

        -

        The bitmap of a canvas element is the one bitmap that's pretty much always going - to be needed in practice. The output bitmap of a rendering context, when it has one, - is always just an alias to a canvas element's bitmap.

        +

        The bitmap of a canvas element is the one + bitmap that's pretty much always going to be needed in practice. The top-level output + bitmap of a rendering context, when it has one, is always just an alias to a + canvas element's bitmap. When layers are opened, + draw calls operate on a separate current output bitmap that gets composited to the + parent output bitmap when the layer is closed. If the canvas element's + bitmap needs to be presented to the user while layers are opened, the + top-level output bitmap is used, meaning that the content of unclosed layers will not + be presented. They will be presented in a later frame, if and when the layers are closed.

        Additional bitmaps are sometimes needed, e.g. to enable fast drawing when the canvas is being painted at a different size than its natural size, @@ -65652,16 +65699,17 @@ context.fillRect(100,0,50,50); // only this square remains

        The canvas state
        -

        Objects that implement the CanvasState interface maintain a stack of drawing - states. Drawing states consist of:

        +

        Objects that implement the CanvasState interface maintain a stack of drawing states, which is a stack of drawing states. A drawing state consists of:

          -

        • The current transformation +

        • A layer transformation matrix and parents transformation matrix.

          • -

        • The current clipping region.

          • +

        • A clipping region.

          • -

        • The current letter +

        • A letter spacing, word spacing, fill style, stroke style, blending operator">compositing and blending operator, and shadow color.

          • -

        • The current values of the following attributes:

          A value for the following attributes: lineWidth, lineCap, lineJoin, data-x="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled, imageSmoothingQuality.

          • -

        • The current dash list.

          • +

        • A dash list.

          • + +

        • An optional canvas layer state, defaults to null if not specified.

        -

        The rendering context's bitmaps are not part of the drawing state, as they - depend on whether and how the rendering context is bound to a canvas element.

        +

        The drawing state stack is initialized to an empty stack when the context is created. The context owns and uses a + current instance of all the states in drawing state. The drawing state + stack is used to backup and restore the context's drawing state by storing + copies of the context's states.

        + +

        Instead of the context owning a unique current drawing state instance + and initializing the drawing state stack to an empty stack at context + creation, implementations could equivalenty initialize the drawing state stack with + an initial drawing state item and have the context + use the drawing state stack's last item as the context's current drawing + state. In that case, drawing state would hold the context's current + output bitmap instead of canvas layer state having a parent output + bitmap.

        Objects that implement the CanvasState mixin have a context lost boolean, that is initialized to false @@ -65703,14 +65765,15 @@ context.fillRect(100,0,50,50); // only this square remains

        context.save()
        -

        Pushes the current state onto the stack.

        +

        Pushes the current state onto the stack.

        context.restore()
        -

        Pops the top state on the stack, restoring the context to that state.

        +

        Pops the top state on the stack, restoring the context to + that state.

        context.reset()
        -

        Resets the rendering context, which includes the backing buffer, the drawing state stack, - path, and styles.

        +

        Resets the rendering context, which includes the backing buffer, the drawing state + stack, path, and styles.

        context.isContextLost()

        Returns true if the rendering context was lost. Context loss can occur due to driver @@ -65721,11 +65784,26 @@ context.fillRect(100,0,50,50); // only this square remains

        The save() method - steps are to push a copy of the current drawing state onto the drawing state stack.

        + steps are to push a copy of this's current + drawing state onto this's drawing state stack.

        The restore() - method steps are to pop the top entry in the drawing state stack, and reset the drawing state it - describes. If there is no saved state, then the method must do nothing.

        + method steps are:

        + +
          +

        1. If this's drawing state stack is + empty, then return.

          2. + +

        2. If this's drawing state stack's last item's canvas layer + state is not null, then throw an "InvalidStateError" + DOMException.

          3. + +

        3. Let previousDrawingState be the result of popping the drawing state stack.

          4. + +

        4. Set this's current drawing state to + previousDrawingState.

          5. +

        The reset() method steps are to reset the rendering context to its default state.

        @@ -65733,14 +65811,24 @@ context.fillRect(100,0,50,50); // only this square remains

        To reset the rendering context to its default state:

          -

        1. Clear canvas's bitmap to transparent black.

          2. +

        2. Empty this's drawing state + stack.

          3. -

        3. Empty the list of subpaths in context's current default path.

          4. +

        4. Set this's current output bitmap to a reference of + this's top-level output bitmap.

          5. + +

        5. Clear the top-level output bitmap to transparent black.

          6. -

        6. Clear the context's drawing state stack.

          7. +

        7. Set this's top-level output bitmap's origin-clean flag to true.

          8. -

        8. Reset everything that drawing state consists of to their initial - values.

          9. +

        9. Set this's layer count to + 0.

          10. + +

        10. Empty the list of subpaths in context's current default path.

          11. + +

        11. Reset the items in this's drawing + state to their initial values.

        The

        +
        Layers
        + +

        Objects that implement the CanvasLayers mixin have methods (defined in this + section) for managing a stack of output bitmaps.

        + +

        Layers are opened and closed using beginLayer() + and endLayer(). When a layer is opened, the context's + current output bitmap is aliased to that layer's output bitmap, such + that all draw calls performed while the layer is active will effectively render onto the layer's + output bitmap. When endLayer() is + called, the layer's output bitmap gets composited in the parent's output + bitmap using the layer rendering states.

        + +
        + +

        The drawing state stack keeps track of opened layers by holding canvas layer + state structs containing the following item:

        + +
          +
        • parent output bitmap, the layer's parent output bitmap.
          • +
        + +
        + +

        The layer rendering states are the subset of drawing state that + are applied to a layer's output bitmap when it's drawn to its parent output + bitmap. The layer rendering states are:

        + +
          +
        • The layer transformation matrix.
          • + +
        • The current clipping region.
          • + +
        • The current filter, global alpha, and compositing and blending operator.
          • + +
        • The current values of the following attributes: + shadowOffsetX, + shadowOffsetY, + shadowBlur and + shadowColor
          • +
        + +
        +

        Because the layer rendering states are applied on the layer's output, + they cannot also be applied to the layer's content, or else, they would be applied twice. These + states are therefore set to their default value when opening a layer.

        + +

        The layer transformation matrix can conceptually be considered as applying to + nested layer's output, as if the nested layer's output bitmap was transformed by the + current layer transformation matrix and then drawn to the current layers's + output bitmap when the nested layer is closed. In practice however, the layer + transformation matrix doesn't need to be applied on the nested layer's output since shapes + and images are always drawn using the total transformation matrix, in particular + those drawn using the current default path, which is always pre-transformed.

        + +

        imageSmoothingEnabled is not part + of the layer rendering states because layers's output + bitmaps are not resampled when drawn to their parent output bitmap. If they + were resampled, the picture quality would lower for every nested layer subject to a non-identity + transform. Instead, pixels are drawn in layers at the exact coordinates they'll have in the + top-level output bitmap, thus making sure that layers's pixels have a one-to-one + correspondance with their parent's.

        +
        + +
        +
        context.beginLayer()
        +

        Pushes the current state onto the stack and starts a new layer. While a layer is active, + all draw calls are performed on a separate surface, which will later be drawn as a whole to the + canvas (or parent layer) when the layer is closed.

        + +
        context.endLayer()
        +

        Pops the top state off the stack, restores the context to that state and draws the layer's + resulting texture to the parent surface (the canvas or the parent layer) using the global + rendering states as they were when beginLayer() + was called.

        +
        + +
        + +

        The beginLayer() method steps are:

        + +
          +

        1. Let currentOutputBitmap be this's + current output bitmap.

          2. + +

        2. Let layerOutputBitmap be a newly created output bitmap, + initialized with an origin-clean flag set to + true.

          3. + +

        3. Let layerState be a new canvas layer state object, initialized + with parent output bitmap set to currentOutputBitmap.

          4. + +

        4. Push a copy of this's current drawing + state onto this's drawing state stack.

          5. + +

        5. Reset this's layer rendering states to their default + value.

          6. + +

        6. Set this's drawing state stack's last item's canvas layer + state to layerState.

          7. + +

        7. Set this's current output bitmap to + layerOutputBitmap.

          8. + +

        8. Set this's parents transformation matrix to total transformation + matrix.

          9. + +

        9. Increment this's layer count + by 1.

          10. +
        + +

        The endLayer() method steps are:

        + +
          +

        1. If this's drawing state stack is + empty, then throw an "InvalidStateError" + DOMException.

          2. + +

        2. Let layerState be this's drawing state stack's last + item's canvas layer state.

          3. + +

        3. If layerState is null, then throw an + "InvalidStateError" DOMException.

          4. + +

        4. Let layerOutputBitmap be this's current output + bitmap.

          5. + +

        5. Let parentOutputBitmap be + layerState's parent output bitmap.

          6. + +

        6. If layerOutputBitmap is marked as not origin-clean, then set the origin-clean flag of parentOutputBitmap + to false.

          7. + +

        7. Set this's current output bitmap to + parentOutputBitmap.

          8. + +

        8. Let parentDrawingStates be the result of popping this's drawing state stack.

          9. + +

        9. Set this's current drawing state to + parentDrawingStates.

          10. + +

        10. Draw layerOutputBitmap onto this's current output + bitmap using the steps outlined in the drawing model.

          11. + +

        11. Decrement this's layer count + by 1.

          12. +
        + +
        + +
        +

        As described in the drawing model, shapes and images are subjected to the + total transformation matrix and are therefore written to layers at the final pixel + position they'll have in the top-level output bitmap. Thus, when layers are closed, + pixels from the layer's output bitmap have a one to one correspondence with the + pixels in the parent's output bitmap and can therefore be directly drawn to the + parent without further transforms or resampling.

        + +

        For legacy reasons, calling restore() when the + drawing state stack is empty is a no-op. The addition of the layer API however + introduced several new potential pitfalls. For instance, scripts like context.save(); context.endLayer(); or context.beginLayer(); + context.restore(); are problematic. They are symptomatic of web page bugs and user agents + cannot silently fix these bugs on behalf of the page (e.g. did the page intend to call + endLayer() instead of restore(), or is there a missing save()?) For that reason, invalid API sequences involving + layers throw exceptions to make the issue clear to web developers.

        +
        +
        Line styles
        @@ -67329,9 +67597,8 @@ try {

        For objects implementing the CanvasDrawPath and CanvasTransform interfaces, the points passed to the methods, and the resulting lines added to current - default path by these methods, must be transformed according to the current transformation matrix before being added to - the path.

        + default path by these methods, must be transformed according to the total + transformation matrix before being added to the path.

        The moveTo(x, y) method, when invoked, must run these steps:

        @@ -67431,9 +67698,8 @@ try { DOMException.

      5. Let the point (x0, y0) be the last point in the subpath, transformed - by the inverse of the current transformation - matrix (so that it is in the same coordinate system as the points passed to the - method).

        6. + by the inverse of the total transformation matrix (so that it is in the same + coordinate system as the points passed to the method).

      6. If the point (x0, y0) is equal to the point (x1, y1), or if the point (x1, y1) is equal to the point @@ -67807,14 +68073,26 @@ try {

-
Transformations
+
Transformations
+ +

Objects that implement the CanvasTransform interface have a layer + transformation matrix, a parents transformation matrix and a total + transformation matrix, as well as methods (described in this section) to manipulate the + layer transformation matrix. The layer transformation matrix + corresponds to the transformation local to the current layer. The parents transformation + matrix is the multiplication of the transforms of all the ancestors of the current layer. + The total transformation matrix encompases all transforms mapping drawn shapes and + images to the top-level output bitmap and is always equals to the results of + multiplying the parents transformation matrix with the layer transformation + matrix.

-

Objects that implement the CanvasTransform interface have a current - transformation matrix, as well as methods (described in this section) to manipulate it. When - an object implementing the CanvasTransform interface is created, its transformation - matrix must be initialized to the identity matrix.

+

When an object implementing the CanvasTransform interface is created, its + layer transformation matrix and parents transformation matrix must be + initialized to the identity matrix. For objects not implementing the CanvasLayers + interface, the parents transformation matrix is always equal to the identity + matrix.

-

The current transformation matrix is applied to coordinates when creating the +

The total transformation matrix is applied to coordinates when creating the current default path, and when painting text, shapes, and Path2D objects, on objects implementing the CanvasTransform interface.

@@ -67834,55 +68112,55 @@ try {
context.scale(x, y)
-

Changes the current transformation matrix to apply a scaling transformation with +

Changes the layer transformation matrix to apply a scaling transformation with the given characteristics.

context.rotate(angle)
-

Changes the current transformation matrix to apply a rotation transformation +

Changes the layer transformation matrix to apply a rotation transformation with the given characteristics. The angle is in radians.

context.translate(x, y)
-

Changes the current transformation matrix to apply a translation transformation +

Changes the layer transformation matrix to apply a translation transformation with the given characteristics.

context.transform(a, b, c, d, e, f)
-

Changes the current transformation matrix to apply the matrix given by the +

Changes the layer transformation matrix to apply the matrix given by the arguments as described below.

matrix = context.getTransform()
-

Returns a copy of the current transformation matrix, as a newly created +

Returns a copy of the layer transformation matrix, as a newly created DOMMatrix object.

context.setTransform(a, b, c, d, e, f)
-

Changes the current transformation matrix to the matrix given by the +

Changes the layer transformation matrix to the matrix given by the arguments as described below.

context.setTransform(transform)
-

Changes the current transformation matrix to the matrix represented by +

Changes the layer transformation matrix to the matrix represented by the passed DOMMatrix2DInit dictionary.

context.resetTransform()
-

Changes the current transformation matrix to the identity matrix.

+

Changes the layer transformation matrix to the identity matrix.

@@ -67893,7 +68171,7 @@ try {

  1. If either of the arguments are infinite or NaN, then return.

    2. -

  2. Add the scaling transformation described by the arguments to the current +

  3. Add the scaling transformation described by the arguments to the layer transformation matrix. The x argument represents the scale factor in the horizontal direction and the y argument represents the scale factor in the vertical direction. The factors are multiples.

    4. @@ -67906,7 +68184,7 @@ try {

    1. If angle is infinite or NaN, then return.

      2. -

    2. Add the rotation transformation described by the argument to the current +

    3. Add the rotation transformation described by the argument to the layer transformation matrix. The angle argument represents a clockwise rotation angle expressed in radians.

    @@ -67918,7 +68196,7 @@ try {

    1. If either of the arguments are infinite or NaN, then return.

      2. -

    2. Add the translation transformation described by the arguments to the current +

    3. Add the translation transformation described by the arguments to the layer transformation matrix. The x argument represents the translation distance in the horizontal direction and the y argument represents the translation distance in the vertical direction. The arguments are in coordinate space units.

      4. @@ -67933,8 +68211,8 @@ try {

    4. If any of the arguments are infinite or NaN, then return.

    5. -

      Replace the current transformation matrix with the result of multiplying the current transformation matrix +

      Replace the layer transformation matrix with the result of multiplying the layer transformation matrix with the matrix described by:

      @@ -67971,11 +68249,11 @@ try {

      The getTransform() method, when invoked, must return - a newly created DOMMatrix representing a copy of the current transformation + a newly created DOMMatrix representing a copy of the layer transformation matrix matrix of the context.

      This returned object is not live, so updating it will not affect the - current transformation matrix, and updating the current transformation + layer transformation matrix, and updating the layer transformation matrix will not affect an already returned DOMMatrix.

      The

      If any of the arguments are infinite or NaN, then return.

    6. -

      Reset the current transformation matrix to the matrix described by:

      +

      Reset the layer transformation matrix to the matrix described by:

      7. @@ -68022,12 +68300,12 @@ try { m21 element, m22 element, m41 element, or m42 element are infinite or NaN, then return.

      -

    7. Reset the current transformation matrix to matrix.

      8. +

    8. Reset the layer transformation matrix to matrix.

      9. The resetTransform() method, when invoked, must - reset the current transformation matrix to the identity matrix.

      + reset the layer transformation matrix to the identity matrix.

      @@ -68124,9 +68402,15 @@ try {
      HTMLCanvasElement
      OffscreenCanvas
      -

      If image has either a horizontal dimension or a vertical dimension - equal to zero, then throw an "InvalidStateError" - DOMException.

      +
      +

      If image's rendering context's layer + count is not 0, then throw an "InvalidStateError" + DOMException.

      + +

      If image has either a horizontal dimension or a vertical dimension + equal to zero, then throw an "InvalidStateError" + DOMException.

      +
      ImageBitmap
      VideoFrame
      @@ -68159,7 +68443,7 @@ try { (i.e., after any aspect-ratio correction has been applied).

      When a CanvasImageSource object represents an HTMLCanvasElement, the - element's bitmap must be used as the source image.

      + element's bitmap must be used as the source image.

      When a CanvasImageSource object represents an element that is being rendered and that element has been resized, the original image data of the source image @@ -68304,8 +68588,8 @@ try {

    9. If the given value is a CanvasPattern object that is marked as not origin-clean, then set - this's origin-clean flag to - false.

      10. + this's current output bitmap's origin-clean flag to false.

    10. Set this's fill style to the given value.

      11. @@ -68350,8 +68634,8 @@ try {

    11. If the given value is a CanvasPattern object that is marked as not origin-clean, then set - this's origin-clean flag to - false.

      12. + this's current output bitmap's origin-clean flag to false.

    12. Set this's stroke style to the given value.

      13. @@ -68452,8 +68736,8 @@ try {

      Linear gradients must be rendered such that all points on a line perpendicular to the line that crosses the start and end points have the color at the point where those two lines cross (with the colors coming from the interpolation and extrapolation described - above). The points in the linear gradient must be transformed as described by the current transformation matrix when rendering.

      + above). The points in the linear gradient must be transformed as described by the total + transformation matrix when rendering.

      If x0 = x1 and y0 = y1, then the linear @@ -68499,8 +68783,8 @@ try { of the first offset, the part of the cone after the end circle (1.0) using the color of the last offset, and areas outside the cone untouched by the gradient (transparent black).

      -

      The resulting radial gradient must then be transformed as described by the current transformation matrix when rendering.

      +

      The resulting radial gradient must then be transformed as described by the total + transformation matrix when rendering.

      The createConicGradient(startAngle, @@ -68642,8 +68926,8 @@ try {

    13. Transform the resulting bitmap according to the pattern's transformation matrix.

      14. -

    14. Transform the resulting bitmap again, this time according to the current transformation matrix.

      15. +

    15. Transform the resulting bitmap again, this time according to the total + transformation matrix.

    16. Replace any part of the image outside the area in which the pattern is to be rendered with transparent black.

      17. @@ -68667,16 +68951,19 @@ try {
      Drawing rectangles to the bitmap

      Objects that implement the CanvasRect interface provide the following methods for - immediately drawing rectangles to the bitmap. The methods each take four arguments; the first two - give the x and y coordinates of the top left of the rectangle, and the - second two give the width w and height h of the rectangle, respectively.

      + immediately drawing rectangles to the current output bitmap. The methods each take + four arguments; the first two give the x and y coordinates of the top left + of the rectangle, and the second two give the width w and height h of the + rectangle, respectively.

      -

      The current transformation matrix must be - applied to the following four coordinates, which form the path that must then be closed to get the - specified rectangle: (x, y), (x+w, y), (x+w, y+h), (x, y+h).

      +

      The total transformation matrix must be applied to the following four + coordinates, which form the path that must then be closed to get the specified rectangle: (x, y), (x+w, + y), (x+w, + y+h), (x, + y+h).

      Shapes are painted without affecting the current default path, and are subject to the clipping region, and, with the exception of

      context.clearRect(x, y, w, h)
      -

      Clears all pixels on the bitmap in the given rectangle to transparent - black.

      +

      Clears all pixels on the current output bitmap in the given rectangle to + transparent black.

      context.fillRect(x, y, w, h)
      -

      Paints the given rectangle onto the bitmap, using the current fill style.

      +

      Paints the given rectangle onto the current output bitmap, using the current + fill style.

      context.strokeRect(x, y, w, h)
      -

      Paints the box that outlines the given rectangle onto the bitmap, using the current stroke - style.

      +

      Paints the box that outlines the given rectangle onto the current output bitmap, + using the current stroke style.

      @@ -68831,10 +69119,9 @@ try { pixels.

    17. -

      Paint the shapes given in glyphs, as transformed by the current transformation matrix, with each CSS pixel in the coordinate space of glyphs mapped to one - coordinate space unit.

      +

      Paint the shapes given in glyphs, as transformed by the total + transformation matrix, with each CSS pixel in the coordinate + space of glyphs mapped to one coordinate space unit.

      For fillText(), this's fill style must be applied to the @@ -69000,9 +69287,9 @@ try {

      Drawing paths to the canvas

      Objects that implement the CanvasDrawPath interface have a current default - path. There is only one current default path, it is not part of the - drawing state. The current default path is a path, as described above.

      + path. There is only one current default path, it is not part of drawing + state. The current default path is a path, + as described above.

      context.beginPath()
      @@ -69066,13 +69353,12 @@ try { Path2D object, or the current default path otherwise.

      When the intended path is a Path2D object, the coordinates and lines - of its subpaths must be transformed according to the current transformation matrix on the object - implementing the CanvasTransform interface when used by these methods (without - affecting the Path2D object itself). When the intended path is the current - default path, it is not affected by the transform. (This is because transformations - already affect the current default path when it is constructed, so applying it when - it is painted as well would result in a double transformation.)

      + of its subpaths must be transformed according to the total transformation matrix on + the object implementing the CanvasTransform interface when used by these methods + (without affecting the Path2D object itself). When the intended path is the + current default path, it is not affected by the transform. (This is because + transformations already affect the current default path when it is constructed, so + applying it when it is painted as well would result in a double transformation.)

      The fill(fillRule) method steps are to run the @@ -69172,7 +69458,7 @@ try {

    18. If x or y are infinite or NaN, then return false.

    19. If the point given by the x and y coordinates, when treated as - coordinates in the canvas coordinate space unaffected by the current transformation, is inside + coordinates in the canvas coordinate space unaffected by transformations, is inside the intended path for path as determined by the fill rule indicated by fillRule, then return true. Open subpaths must be implicitly closed when computing the area inside the path, without affecting the actual subpaths. Points on the path @@ -69201,7 +69487,7 @@ try {

    20. If x or y are infinite or NaN, then return false.

    21. If the point given by the x and y coordinates, when treated as - coordinates in the canvas coordinate space unaffected by the current transformation, is inside + coordinates in the canvas coordinate space unaffected by transformations, is inside the path that results from tracing the intended path for path, using the nonzero winding rule, and using @@ -69355,7 +69641,8 @@ try { data-x="concept-CanvasFillStrokeStyles-stroke-style">stroke style, or any of the members in the CanvasPathDrawingStyles, CanvasTextDrawingStyles interfaces, but should be subject to the clipping region. (The effect of - transformations is described above and varies based on which path is being used.)

      + transformations is described above and varies based on which path is being + used.)

    22. Inform the user that the focus is at the location given by the @@ -69435,16 +69722,16 @@ try {

      If not specified, the dw and dh arguments must default to the values of sw and sh, interpreted such that one CSS pixel - in the image is treated as one unit in the output bitmap's coordinate space. If the - sx, sy, sw, and sh arguments are omitted, then they - must default to 0, 0, the image's natural width in image pixels, and the image's - natural height in image pixels, respectively. If the image has no natural - dimensions, then the concrete object size must be used instead, as determined - using the CSS "Concrete Object - Size Resolution" algorithm, with the specified size having neither a definite width - nor height, nor any additional constraints, the object's natural properties being those of the - image argument, and the default object size being the size of the - output bitmap. CSSIMAGES

      + in the image is treated as one unit in the current output bitmap's coordinate + space. If the sx, sy, sw, and sh arguments are + omitted, then they must default to 0, 0, the image's natural width in image pixels, + and the image's natural height in image pixels, respectively. If the image has no + natural dimensions, then the concrete object size must be used instead, as + determined using the CSS "Concrete + Object Size Resolution" algorithm, with the specified size having neither a definite + width nor height, nor any additional constraints, the object's natural properties being those of + the image argument, and the default object size being the size of the + current output bitmap. CSSIMAGES

      The source rectangle is the rectangle whose corners are the four points (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh).

      @@ -69456,9 +69743,9 @@ try { to the source image and the destination rectangle must be clipped in the same proportion.

      When the destination rectangle is outside the destination image (the - output bitmap), the pixels that land outside the output bitmap are - discarded, as if the destination was an infinite canvas whose rendering was clipped to the - dimensions of the output bitmap.

      + current output bitmap), the pixels that land outside the current output + bitmap are discarded, as if the destination was an infinite canvas whose rendering was + clipped to the dimensions of the current output bitmap.

    23. If one of the sw or sh arguments is zero, then return. Nothing is @@ -69466,9 +69753,9 @@ try {

    24. Paint the region of the image argument specified by the source rectangle - on the region of the rendering context's output bitmap specified by the - destination rectangle, after applying the current - transformation matrix to the destination rectangle.

      + on the region of the rendering context's current output bitmap specified by the + destination rectangle, after applying the total transformation matrix to the + destination rectangle.

      The image data must be processed in the original direction, even if the dimensions given are negative.

      The global alpha value gives an alpha value - that is applied to shapes and images before they are composited onto the output bitmap. - The value ranges from 0.0 (fully transparent) to 1.0 (no additional transparency). It must - initially have the value 1.0.

      + that is applied to shapes and images before they are composited onto the current output + bitmap. The value ranges from 0.0 (fully transparent) to 1.0 (no additional transparency). + It must initially have the value 1.0.

      The globalAlpha getter steps are to return @@ -70097,8 +70393,8 @@ console.log(pixels.data[2]);

      The current compositing and blending operator value controls how shapes and images - are drawn onto the output bitmap, once they have had the global alpha and the current transformation + are drawn onto the current output bitmap, once they have had the global alpha and the total transformation matrix applied. Initially, it must be set to "source-over".

      @@ -70236,7 +70532,9 @@ console.log(pixels.data[2]); for="CanvasShadowStyles">shadowOffsetY attributes specify the distance that the shadow will be offset in the positive horizontal and positive vertical distance respectively. Their values are in coordinate space units. They are not - affected by the current transformation matrix.

      + affected by the layer transformation matrix but are affected by the parents + transformation matrix (for objects implementing the CanvasLayers + interface), as described in the drawing model.

      When the context is created, the shadow offset attributes must initially have the value 0.

      @@ -70247,8 +70545,10 @@ console.log(pixels.data[2]);

      The shadowBlur attribute specifies the level of the - blurring effect. (The units do not map to coordinate space units, and are not affected by the - current transformation matrix.)

      + blurring effect. The units do not map to coordinate space units. They are not affected by the + layer transformation matrix but are affected by the parents transformation + matrix (for objects implementing the CanvasLayers interface), as described in + the drawing model.

      When the context is created, the shadowBlur attribute must initially have the value 0.

      @@ -70372,10 +70672,9 @@ console.log(pixels.data[2]);

      Coordinates used in the value of the current filter are interpreted such that one pixel is equivalent to one SVG user space unit and to - one canvas coordinate space unit. Filter coordinates are not affected by the current transformation matrix. The current - transformation matrix affects only the input to the filter. Filters are applied in the - output bitmap's coordinate space.

      + one canvas coordinate space unit. The total transformation matrix affects the input + to the filter but the filter itself is applied in layer coordinate space and thus, + filter coordinates are only affected by the parents transformation matrix.

      @@ -70423,8 +70722,8 @@ console.log(pixels.data[2]);

      1. Render the shape or image onto an infinite transparent black bitmap, creating image A, as described in the previous sections. For shapes, the current fill, stroke, - and line styles must be honored, and the stroke must itself also be subjected to the current - transformation matrix.

        2. + and line styles must be honored, and the stroke must itself also be subjected to the + total transformation matrix.

      2. Multiply the alpha component of every pixel in A by global alpha.

        3. @@ -70436,25 +70735,44 @@ console.log(pixels.data[2]); the input to the current filter, creating image B. If the current filter is a string parseable as a <filter-value-list>, then draw using the current filter in the same manner as SVG.

        + data-x="concept-canvas-current-filter">current filter in the same manner as SVG. The + filter is always applied in layer coordinate space.

        Otherwise, let B be an alias for A.

        -

      3. When shadows are drawn, render the shadow from image B, - using the current shadow styles, creating image C.

        4. +

      4. When shadows are drawn, render the shadow from image B in + layer coordinate space, using the current shadow styles, creating image + C.

      5. When shadows are drawn, composite C within the - clipping region over the current output bitmap using the current + clipping region over the current output bitmap using the current compositing and blending operator.

        6. -

      6. Composite B within the clipping region over the current - output bitmap using the current compositing and blending - operator.

        7. +

      7. Composite B within the clipping region over the current + output bitmap using the current compositing and blending operator.

      -

      When compositing onto the output bitmap, pixels that would fall outside of the - output bitmap must be discarded.

      +

      When compositing onto the current output bitmap, pixels that would fall outside of + the current output bitmap must be discarded.

      + +

      To apply a shadow or filter on an image A in layer coordinate space, user + agents must follow these steps:

      + +
        +

      1. Let inverseParentsTransform be the result of inverting the parents + transformation matrix.

        2. + +

      2. Transform image A using inverseParentsTransform, creating image + B.

        3. + +

      3. Apply the shadow or filter on image B, creating image C.

        4. + +

      4. Transform image C using parents transformation matrix, creating + image D.

        5. + +

      5. Return image D.

        6. +
      @@ -70776,7 +71094,8 @@ dictionary ImageBitmapRenderingContextSettings {

    25. Set context's output bitmap to the same - bitmap as target's bitmap (so that they are shared).

      26. + bitmap as target's bitmap (so that they are + shared).

    26. Run the steps to set an ImageBitmapRenderingContext's output bitmap with context.

      27. @@ -71209,6 +71528,13 @@ interface OffscreenCanvas : EventTarget { internal slot is set to true, then return a promise rejected with an "InvalidStateError" DOMException.

      +

    27. If this OffscreenCanvas object's context mode is 2d and the rendering context's layer count is not 0, then return a promise + rejected with an "InvalidStateError" + DOMException.

      +

    28. If this OffscreenCanvas object's context mode is 2d and the rendering context's OffscreenCanvas : EventTarget { data-x="offscreencanvas-context-none">none, then throw an "InvalidStateError" DOMException.

      29. +

    29. If this OffscreenCanvas object's context mode is 2d and the rendering context's layer count is not 0, then throw an + "InvalidStateError" DOMException.

      30. +

    30. Let image be a newly created ImageBitmap object that references the same underlying bitmap data as this OffscreenCanvas object's bitmap.

      31. @@ -71311,6 +71643,7 @@ interface OffscreenCanvasRenderingContext2D { }; OffscreenCanvasRenderingContext2D includes CanvasState; +OffscreenCanvasRenderingContext2D includes CanvasLayers; OffscreenCanvasRenderingContext2D includes CanvasTransform; OffscreenCanvasRenderingContext2D includes CanvasCompositing; OffscreenCanvasRenderingContext2D includes CanvasImageSmoothing; @@ -71340,7 +71673,8 @@ interface OffscreenCanvasRenderingContext2D {

      An OffscreenCanvasRenderingContext2D object has a bitmap that is initialized when the object is - created.

      + created. This bitmap plays the same role as + CanvasRenderingContext2D's top-level output bitmap.

      The bitmap has an origin-clean flag, which can be set to true or @@ -71403,7 +71737,8 @@ interface OffscreenCanvasRenderingContext2D { created bitmap with the dimensions specified by the width and height attributes of target, and set - target's bitmap to the same bitmap (so that they are shared).

      + target's bitmap to the same bitmap (so that they + are shared).

    31. If context's alpha flag is set to true, initialize all the pixels of context's