@pixi/canvas-renderer - npm Package Compare versions

Comparing version 7.2.4 to 7.3.0-rc

lib/BaseTexture.js

@@ -1,6 +0,4 @@
-'use strict';
-
-var core = require('@pixi/core');
-
-core.BaseTexture.prototype.getDrawableSource = function getDrawableSource() {
+"use strict";
+var core = require("@pixi/core");
+core.BaseTexture.prototype.getDrawableSource = function() {
   const resource = this.resource;
@@ -7,0 +5,0 @@ return resource ? resource.bitmap || resource.source : null;

lib/CanvasContextSystem.js

@@ -1,80 +0,67 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@pixi/core');
-var mapCanvasBlendModesToPixi = require('./utils/mapCanvasBlendModesToPixi.js');
-
+"use strict";
+var core = require("@pixi/core"), mapCanvasBlendModesToPixi = require("./utils/mapCanvasBlendModesToPixi.js");
 const tempMatrix = new core.Matrix();
 class CanvasContextSystem {
+  /** @param renderer - A reference to the current renderer */
   constructor(renderer) {
-    this.activeResolution = 1;
-    this.smoothProperty = "imageSmoothingEnabled";
-    this.blendModes = mapCanvasBlendModesToPixi.mapCanvasBlendModesToPixi();
-    this._activeBlendMode = null;
-    this._projTransform = null;
-    this._outerBlend = false;
-    this.renderer = renderer;
+    this.activeResolution = 1, this.smoothProperty = "imageSmoothingEnabled", this.blendModes = mapCanvasBlendModesToPixi.mapCanvasBlendModesToPixi(), this._activeBlendMode = null, this._projTransform = null, this._outerBlend = !1, this.renderer = renderer;
   }
+  /** initiates the system */
   init() {
     const alpha = this.renderer.background.alpha < 1;
-    this.rootContext = this.renderer.view.getContext("2d", { alpha });
-    this.activeContext = this.rootContext;
-    if (!this.rootContext.imageSmoothingEnabled) {
+    if (this.rootContext = this.renderer.view.getContext("2d", { alpha }), this.activeContext = this.rootContext, !this.rootContext.imageSmoothingEnabled) {
       const rc = this.rootContext;
-      if (rc.webkitImageSmoothingEnabled) {
-        this.smoothProperty = "webkitImageSmoothingEnabled";
-      } else if (rc.mozImageSmoothingEnabled) {
-        this.smoothProperty = "mozImageSmoothingEnabled";
-      } else if (rc.oImageSmoothingEnabled) {
-        this.smoothProperty = "oImageSmoothingEnabled";
-      } else if (rc.msImageSmoothingEnabled) {
-        this.smoothProperty = "msImageSmoothingEnabled";
-      }
+      rc.webkitImageSmoothingEnabled ? this.smoothProperty = "webkitImageSmoothingEnabled" : rc.mozImageSmoothingEnabled ? this.smoothProperty = "mozImageSmoothingEnabled" : rc.oImageSmoothingEnabled ? this.smoothProperty = "oImageSmoothingEnabled" : rc.msImageSmoothingEnabled && (this.smoothProperty = "msImageSmoothingEnabled");
     }
   }
+  /**
+   * Sets matrix of context.
+   * called only from render() methods
+   * takes care about resolution
+   * @param transform - world matrix of current element
+   * @param roundPixels - whether to round (tx,ty) coords
+   * @param localResolution - If specified, used instead of `renderer.resolution` for local scaling
+   */
   setContextTransform(transform, roundPixels, localResolution) {
     let mat = transform;
-    const proj = this._projTransform;
-    const contextResolution = this.activeResolution;
-    localResolution = localResolution || contextResolution;
-    if (proj) {
-      mat = tempMatrix;
-      mat.copyFrom(transform);
-      mat.prepend(proj);
-    }
-    if (roundPixels) {
-      this.activeContext.setTransform(mat.a * localResolution, mat.b * localResolution, mat.c * localResolution, mat.d * localResolution, mat.tx * contextResolution | 0, mat.ty * contextResolution | 0);
-    } else {
-      this.activeContext.setTransform(mat.a * localResolution, mat.b * localResolution, mat.c * localResolution, mat.d * localResolution, mat.tx * contextResolution, mat.ty * contextResolution);
-    }
+    const proj = this._projTransform, contextResolution = this.activeResolution;
+    localResolution = localResolution || contextResolution, proj && (mat = tempMatrix, mat.copyFrom(transform), mat.prepend(proj)), roundPixels ? this.activeContext.setTransform(
+      mat.a * localResolution,
+      mat.b * localResolution,
+      mat.c * localResolution,
+      mat.d * localResolution,
+      mat.tx * contextResolution | 0,
+      mat.ty * contextResolution | 0
+    ) : this.activeContext.setTransform(
+      mat.a * localResolution,
+      mat.b * localResolution,
+      mat.c * localResolution,
+      mat.d * localResolution,
+      mat.tx * contextResolution,
+      mat.ty * contextResolution
+    );
   }
+  /**
+   * Clear the canvas of renderer.
+   * @param {string} [clearColor] - Clear the canvas with this color, except the canvas is transparent.
+   * @param {number} [alpha] - Alpha to apply to the background fill color.
+   */
   clear(clearColor, alpha) {
-    const { activeContext: context, renderer } = this;
-    const fillColor = clearColor ? core.Color.shared.setValue(clearColor) : this.renderer.background.backgroundColor;
-    context.clearRect(0, 0, renderer.width, renderer.height);
-    if (clearColor) {
-      context.globalAlpha = alpha ?? this.renderer.background.alpha;
-      context.fillStyle = fillColor.toHex();
-      context.fillRect(0, 0, renderer.width, renderer.height);
-      context.globalAlpha = 1;
-    }
+    const { activeContext: context, renderer } = this, fillColor = clearColor ? core.Color.shared.setValue(clearColor) : this.renderer.background.backgroundColor;
+    context.clearRect(0, 0, renderer.width, renderer.height), clearColor && (context.globalAlpha = alpha ?? this.renderer.background.alpha, context.fillStyle = fillColor.toHex(), context.fillRect(0, 0, renderer.width, renderer.height), context.globalAlpha = 1);
   }
+  /**
+   * Sets the blend mode of the renderer.
+   * @param {number} blendMode - See {@link PIXI.BLEND_MODES} for valid values.
+   * @param {boolean} [readyForOuterBlend=false] - Some blendModes are dangerous, they affect outer space of sprite.
+   * Pass `true` only if you are ready to use them.
+   */
   setBlendMode(blendMode, readyForOuterBlend) {
     const outerBlend = blendMode === core.BLEND_MODES.SRC_IN || blendMode === core.BLEND_MODES.SRC_OUT || blendMode === core.BLEND_MODES.DST_IN || blendMode === core.BLEND_MODES.DST_ATOP;
-    if (!readyForOuterBlend && outerBlend) {
-      blendMode = core.BLEND_MODES.NORMAL;
-    }
-    if (this._activeBlendMode === blendMode) {
-      return;
-    }
-    this._activeBlendMode = blendMode;
-    this._outerBlend = outerBlend;
-    this.activeContext.globalCompositeOperation = this.blendModes[blendMode];
+    !readyForOuterBlend && outerBlend && (blendMode = core.BLEND_MODES.NORMAL), this._activeBlendMode !== blendMode && (this._activeBlendMode = blendMode, this._outerBlend = outerBlend, this.activeContext.globalCompositeOperation = this.blendModes[blendMode]);
   }
   resize() {
-    if (this.smoothProperty) {
-      this.rootContext[this.smoothProperty] = core.BaseTexture.defaultOptions.scaleMode === core.SCALE_MODES.LINEAR;
-    }
+    this.smoothProperty && (this.rootContext[this.smoothProperty] = core.BaseTexture.defaultOptions.scaleMode === core.SCALE_MODES.LINEAR);
   }
+  /** Checks if blend mode has changed. */
   invalidateBlendMode() {
@@ -84,6 +71,3 @@ this._activeBlendMode = this.blendModes.indexOf(this.activeContext.globalCompositeOperation);
   destroy() {
-    this.renderer = null;
-    this.rootContext = null;
-    this.activeContext = null;
-    this.smoothProperty = null;
+    this.renderer = null, this.rootContext = null, this.activeContext = null, this.smoothProperty = null;
   }
@@ -96,4 +80,3 @@ }
 core.extensions.add(CanvasContextSystem);
-
 exports.CanvasContextSystem = CanvasContextSystem;
 //# sourceMappingURL=CanvasContextSystem.js.map

lib/CanvasMaskSystem.js

@@ -1,150 +0,100 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@pixi/core');
-
+"use strict";
+var core = require("@pixi/core");
 class CanvasMaskSystem {
+  /** @param renderer - A reference to the current renderer */
   constructor(renderer) {
-    this._foundShapes = [];
-    this.renderer = renderer;
+    this._foundShapes = [], this.renderer = renderer;
   }
+  /**
+   * This method adds it to the current stack of masks.
+   * @param maskData - the maskData that will be pushed
+   */
   pushMask(maskData) {
-    const renderer = this.renderer;
-    const maskObject = maskData.maskObject || maskData;
+    const renderer = this.renderer, maskObject = maskData.maskObject || maskData;
     renderer.canvasContext.activeContext.save();
     const foundShapes = this._foundShapes;
-    this.recursiveFindShapes(maskObject, foundShapes);
-    if (foundShapes.length > 0) {
+    if (this.recursiveFindShapes(maskObject, foundShapes), foundShapes.length > 0) {
       const context = renderer.canvasContext.activeContext;
       context.beginPath();
       for (let i = 0; i < foundShapes.length; i++) {
-        const shape = foundShapes[i];
-        const transform = shape.transform.worldTransform;
-        this.renderer.canvasContext.setContextTransform(transform);
-        this.renderGraphicsShape(shape);
+        const shape = foundShapes[i], transform = shape.transform.worldTransform;
+        this.renderer.canvasContext.setContextTransform(transform), this.renderGraphicsShape(shape);
       }
-      foundShapes.length = 0;
-      context.clip();
+      foundShapes.length = 0, context.clip();
     }
   }
+  /**
+   * Renders all PIXI.Graphics shapes in a subtree.
+   * @param container - container to scan.
+   * @param out - where to put found shapes
+   */
   recursiveFindShapes(container, out) {
-    if (container.geometry && container.geometry.graphicsData) {
-      out.push(container);
-    }
+    container.geometry && container.geometry.graphicsData && out.push(container);
     const { children } = container;
-    if (children) {
-      for (let i = 0; i < children.length; i++) {
+    if (children)
+      for (let i = 0; i < children.length; i++)
         this.recursiveFindShapes(children[i], out);
-      }
-    }
   }
+  /**
+   * Renders a PIXI.Graphics shape.
+   * @param graphics - The object to render.
+   */
   renderGraphicsShape(graphics) {
     graphics.finishPoly();
-    const context = this.renderer.canvasContext.activeContext;
-    const graphicsData = graphics.geometry.graphicsData;
-    const len = graphicsData.length;
-    if (len === 0) {
-      return;
-    }
-    for (let i = 0; i < len; i++) {
-      const data = graphicsData[i];
-      const shape = data.shape;
-      if (shape.type === core.SHAPES.POLY) {
-        let points = shape.points;
-        const holes = data.holes;
-        let outerArea;
-        let innerArea;
-        let px;
-        let py;
-        context.moveTo(points[0], points[1]);
-        for (let j = 1; j < points.length / 2; j++) {
-          context.lineTo(points[j * 2], points[j * 2 + 1]);
-        }
-        if (holes.length > 0) {
-          outerArea = 0;
-          px = points[0];
-          py = points[1];
-          for (let j = 2; j + 2 < points.length; j += 2) {
-            outerArea += (points[j] - px) * (points[j + 3] - py) - (points[j + 2] - px) * (points[j + 1] - py);
-          }
-          for (let k = 0; k < holes.length; k++) {
-            points = holes[k].shape.points;
-            if (!points) {
-              continue;
-            }
-            innerArea = 0;
-            px = points[0];
-            py = points[1];
-            for (let j = 2; j + 2 < points.length; j += 2) {
-              innerArea += (points[j] - px) * (points[j + 3] - py) - (points[j + 2] - px) * (points[j + 1] - py);
-            }
-            if (innerArea * outerArea < 0) {
-              context.moveTo(points[0], points[1]);
-              for (let j = 2; j < points.length; j += 2) {
-                context.lineTo(points[j], points[j + 1]);
+    const context = this.renderer.canvasContext.activeContext, graphicsData = graphics.geometry.graphicsData, len = graphicsData.length;
+    if (len !== 0)
+      for (let i = 0; i < len; i++) {
+        const data = graphicsData[i], shape = data.shape;
+        if (shape.type === core.SHAPES.POLY) {
+          let points = shape.points;
+          const holes = data.holes;
+          let outerArea, innerArea, px, py;
+          context.moveTo(points[0], points[1]);
+          for (let j = 1; j < points.length / 2; j++)
+            context.lineTo(points[j * 2], points[j * 2 + 1]);
+          if (holes.length > 0) {
+            outerArea = 0, px = points[0], py = points[1];
+            for (let j = 2; j + 2 < points.length; j += 2)
+              outerArea += (points[j] - px) * (points[j + 3] - py) - (points[j + 2] - px) * (points[j + 1] - py);
+            for (let k = 0; k < holes.length; k++)
+              if (points = holes[k].shape.points, !!points) {
+                innerArea = 0, px = points[0], py = points[1];
+                for (let j = 2; j + 2 < points.length; j += 2)
+                  innerArea += (points[j] - px) * (points[j + 3] - py) - (points[j + 2] - px) * (points[j + 1] - py);
+                if (innerArea * outerArea < 0) {
+                  context.moveTo(points[0], points[1]);
+                  for (let j = 2; j < points.length; j += 2)
+                    context.lineTo(points[j], points[j + 1]);
+                } else {
+                  context.moveTo(points[points.length - 2], points[points.length - 1]);
+                  for (let j = points.length - 4; j >= 0; j -= 2)
+                    context.lineTo(points[j], points[j + 1]);
+                }
+                holes[k].shape.closeStroke && context.closePath();
               }
-            } else {
-              context.moveTo(points[points.length - 2], points[points.length - 1]);
-              for (let j = points.length - 4; j >= 0; j -= 2) {
-                context.lineTo(points[j], points[j + 1]);
-              }
-            }
-            if (holes[k].shape.closeStroke) {
-              context.closePath();
-            }
           }
+          points[0] === points[points.length - 2] && points[1] === points[points.length - 1] && context.closePath();
+        } else if (shape.type === core.SHAPES.RECT)
+          context.rect(shape.x, shape.y, shape.width, shape.height), context.closePath();
+        else if (shape.type === core.SHAPES.CIRC)
+          context.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI), context.closePath();
+        else if (shape.type === core.SHAPES.ELIP) {
+          const w = shape.width * 2, h = shape.height * 2, x = shape.x - w / 2, y = shape.y - h / 2, kappa = 0.5522848, ox = w / 2 * kappa, oy = h / 2 * kappa, xe = x + w, ye = y + h, xm = x + w / 2, ym = y + h / 2;
+          context.moveTo(x, ym), context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y), context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym), context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye), context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym), context.closePath();
+        } else if (shape.type === core.SHAPES.RREC) {
+          const rx = shape.x, ry = shape.y, width = shape.width, height = shape.height;
+          let radius = shape.radius;
+          const maxRadius = Math.min(width, height) / 2;
+          radius = radius > maxRadius ? maxRadius : radius, context.moveTo(rx, ry + radius), context.lineTo(rx, ry + height - radius), context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height), context.lineTo(rx + width - radius, ry + height), context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius), context.lineTo(rx + width, ry + radius), context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry), context.lineTo(rx + radius, ry), context.quadraticCurveTo(rx, ry, rx, ry + radius), context.closePath();
         }
-        if (points[0] === points[points.length - 2] && points[1] === points[points.length - 1]) {
-          context.closePath();
-        }
-      } else if (shape.type === core.SHAPES.RECT) {
-        context.rect(shape.x, shape.y, shape.width, shape.height);
-        context.closePath();
-      } else if (shape.type === core.SHAPES.CIRC) {
-        context.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
-        context.closePath();
-      } else if (shape.type === core.SHAPES.ELIP) {
-        const w = shape.width * 2;
-        const h = shape.height * 2;
-        const x = shape.x - w / 2;
-        const y = shape.y - h / 2;
-        const kappa = 0.5522848;
-        const ox = w / 2 * kappa;
-        const oy = h / 2 * kappa;
-        const xe = x + w;
-        const ye = y + h;
-        const xm = x + w / 2;
-        const ym = y + h / 2;
-        context.moveTo(x, ym);
-        context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
-        context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
-        context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
-        context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
-        context.closePath();
-      } else if (shape.type === core.SHAPES.RREC) {
-        const rx = shape.x;
-        const ry = shape.y;
-        const width = shape.width;
-        const height = shape.height;
-        let radius = shape.radius;
-        const maxRadius = Math.min(width, height) / 2;
-        radius = radius > maxRadius ? maxRadius : radius;
-        context.moveTo(rx, ry + radius);
-        context.lineTo(rx, ry + height - radius);
-        context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height);
-        context.lineTo(rx + width - radius, ry + height);
-        context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius);
-        context.lineTo(rx + width, ry + radius);
-        context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry);
-        context.lineTo(rx + radius, ry);
-        context.quadraticCurveTo(rx, ry, rx, ry + radius);
-        context.closePath();
       }
-    }
   }
+  /**
+   * Restores the current drawing context to the state it was before the mask was applied.
+   * @param renderer - The renderer context to use.
+   */
   popMask(renderer) {
-    renderer.canvasContext.activeContext.restore();
-    renderer.canvasContext.invalidateBlendMode();
+    renderer.canvasContext.activeContext.restore(), renderer.canvasContext.invalidateBlendMode();
   }
+  /** Destroys this canvas mask manager. */
   destroy() {
@@ -158,4 +108,3 @@ }
 core.extensions.add(CanvasMaskSystem);
-
 exports.CanvasMaskSystem = CanvasMaskSystem;
 //# sourceMappingURL=CanvasMaskSystem.js.map

lib/CanvasObjectRendererSystem.js

@@ -1,92 +0,43 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@pixi/core');
-
+"use strict";
+var core = require("@pixi/core");
 class CanvasObjectRendererSystem {
+  /** @param renderer - A reference to the current renderer */
   constructor(renderer) {
     this.renderer = renderer;
   }
+  /**
+   * Renders the object to its Canvas view.
+   * @param displayObject - The object to be rendered.
+   * @param options - the options to be passed to the renderer
+   */
   render(displayObject, options) {
     const renderer = this.renderer;
-    if (!renderer.view) {
+    if (!renderer.view)
       return;
-    }
     const _context = renderer.canvasContext;
-    let renderTexture;
-    let clear;
-    let transform;
-    let skipUpdateTransform;
-    if (options) {
-      renderTexture = options.renderTexture;
-      clear = options.clear;
-      transform = options.transform;
-      skipUpdateTransform = options.skipUpdateTransform;
-    }
-    this.renderingToScreen = !renderTexture;
-    renderer.emit("prerender");
+    let renderTexture, clear, transform, skipUpdateTransform;
+    options && (renderTexture = options.renderTexture, clear = options.clear, transform = options.transform, skipUpdateTransform = options.skipUpdateTransform), this.renderingToScreen = !renderTexture, renderer.emit("prerender");
     const rootResolution = renderer.resolution;
-    if (renderTexture) {
-      renderTexture = renderTexture.castToBaseTexture();
-      if (!renderTexture._canvasRenderTarget) {
-        renderTexture._canvasRenderTarget = new core.utils.CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution);
-        renderTexture.resource = new core.CanvasResource(renderTexture._canvasRenderTarget.canvas);
-        renderTexture.valid = true;
-      }
-      _context.activeContext = renderTexture._canvasRenderTarget.context;
-      renderer.canvasContext.activeResolution = renderTexture._canvasRenderTarget.resolution;
-    } else {
-      _context.activeContext = _context.rootContext;
-      _context.activeResolution = rootResolution;
-    }
+    renderTexture ? (renderTexture = renderTexture.castToBaseTexture(), renderTexture._canvasRenderTarget || (renderTexture._canvasRenderTarget = new core.utils.CanvasRenderTarget(
+      renderTexture.width,
+      renderTexture.height,
+      renderTexture.resolution
+    ), renderTexture.resource = new core.CanvasResource(renderTexture._canvasRenderTarget.canvas), renderTexture.valid = !0), _context.activeContext = renderTexture._canvasRenderTarget.context, renderer.canvasContext.activeResolution = renderTexture._canvasRenderTarget.resolution) : (_context.activeContext = _context.rootContext, _context.activeResolution = rootResolution);
     const context2D = _context.activeContext;
-    _context._projTransform = transform || null;
-    if (!renderTexture) {
-      this.lastObjectRendered = displayObject;
-    }
-    if (!skipUpdateTransform) {
+    if (_context._projTransform = transform || null, renderTexture || (this.lastObjectRendered = displayObject), !skipUpdateTransform) {
       const cacheParent = displayObject.enableTempParent();
-      displayObject.updateTransform();
-      displayObject.disableTempParent(cacheParent);
+      displayObject.updateTransform(), displayObject.disableTempParent(cacheParent);
     }
-    context2D.save();
-    context2D.setTransform(1, 0, 0, 1, 0, 0);
-    context2D.globalAlpha = 1;
-    _context._activeBlendMode = core.BLEND_MODES.NORMAL;
-    _context._outerBlend = false;
-    context2D.globalCompositeOperation = _context.blendModes[core.BLEND_MODES.NORMAL];
-    if (clear ?? renderer.background.clearBeforeRender) {
+    if (context2D.save(), context2D.setTransform(1, 0, 0, 1, 0, 0), context2D.globalAlpha = 1, _context._activeBlendMode = core.BLEND_MODES.NORMAL, _context._outerBlend = !1, context2D.globalCompositeOperation = _context.blendModes[core.BLEND_MODES.NORMAL], clear ?? renderer.background.clearBeforeRender)
       if (this.renderingToScreen) {
         context2D.clearRect(0, 0, renderer.width, renderer.height);
         const background = renderer.background;
-        if (background.alpha > 0) {
-          context2D.globalAlpha = background.backgroundColor.alpha;
-          context2D.fillStyle = background.backgroundColor.toHex();
-          context2D.fillRect(0, 0, renderer.width, renderer.height);
-          context2D.globalAlpha = 1;
-        }
-      } else {
-        renderTexture = renderTexture;
-        renderTexture._canvasRenderTarget.clear();
-        if (renderTexture.clear.alpha > 0) {
-          context2D.globalAlpha = renderTexture.clear.alpha;
-          context2D.fillStyle = renderTexture.clear.toHex();
-          context2D.fillRect(0, 0, renderTexture.realWidth, renderTexture.realHeight);
-          context2D.globalAlpha = 1;
-        }
-      }
-    }
+        background.alpha > 0 && (context2D.globalAlpha = background.backgroundColor.alpha, context2D.fillStyle = background.backgroundColor.toHex(), context2D.fillRect(0, 0, renderer.width, renderer.height), context2D.globalAlpha = 1);
+      } else
+        renderTexture = renderTexture, renderTexture._canvasRenderTarget.clear(), renderTexture.clear.alpha > 0 && (context2D.globalAlpha = renderTexture.clear.alpha, context2D.fillStyle = renderTexture.clear.toHex(), context2D.fillRect(0, 0, renderTexture.realWidth, renderTexture.realHeight), context2D.globalAlpha = 1);
     const tempContext = _context.activeContext;
-    _context.activeContext = context2D;
-    displayObject.renderCanvas(renderer);
-    _context.activeContext = tempContext;
-    context2D.restore();
-    _context.activeResolution = rootResolution;
-    _context._projTransform = null;
-    renderer.emit("postrender");
+    _context.activeContext = context2D, displayObject.renderCanvas(renderer), _context.activeContext = tempContext, context2D.restore(), _context.activeResolution = rootResolution, _context._projTransform = null, renderer.emit("postrender");
   }
   destroy() {
-    this.lastObjectRendered = null;
-    this.render = null;
+    this.lastObjectRendered = null, this.render = null;
   }
@@ -99,4 +50,3 @@ }
 core.extensions.add(CanvasObjectRendererSystem);
-
 exports.CanvasObjectRendererSystem = CanvasObjectRendererSystem;
 //# sourceMappingURL=CanvasObjectRendererSystem.js.map

lib/CanvasRenderer.d.ts

@@ -120,8 +120,7 @@ import { RENDERER_TYPE, SystemManager } from '@pixi/core';
      * @param displayObject - The displayObject the object will be generated from.
-     * @param {object} options - Generate texture options.
-     * @param {PIXI.SCALE_MODES} options.scaleMode - The scale mode of the texture.
-     * @param {number} options.resolution - The resolution / device pixel ratio of the texture being generated.
+     * @param {IGenerateTextureOptions} options - Generate texture options.
      * @param {PIXI.Rectangle} options.region - The region of the displayObject, that shall be rendered,
      *        if no region is specified, defaults to the local bounds of the displayObject.
-     * @param {PIXI.MSAA_QUALITY} options.multisample - The number of samples of the frame buffer.
+     * @param {number} [options.resolution] - If not given, the renderer's resolution is used.
+     * @param {PIXI.MSAA_QUALITY} [options.multisample] - If not given, the renderer's multisample is used.
      * @returns A texture of the graphics object.
@@ -128,0 +127,0 @@ */

lib/CanvasRenderer.js

@@ -1,14 +0,9 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@pixi/core');
-
-const { deprecation } = core.utils;
-const _CanvasRenderer = class extends core.SystemManager {
+"use strict";
+var core = require("@pixi/core");
+const { deprecation } = core.utils, _CanvasRenderer = class _CanvasRenderer2 extends core.SystemManager {
+  /**
+   * @param {PIXI.IRendererOptions} [options] - See {@link PIXI.settings.RENDER_OPTIONS} for defaults.
+   */
   constructor(options) {
-    super();
-    this.type = core.RENDERER_TYPE.CANVAS;
-    this.rendererLogId = "Canvas";
-    options = Object.assign({}, core.settings.RENDER_OPTIONS, options);
+    super(), this.type = core.RENDERER_TYPE.CANVAS, this.rendererLogId = "Canvas", options = Object.assign({}, core.settings.RENDER_OPTIONS, options);
     const systemConfig = {
@@ -26,3 +21,3 @@ runners: [
       ],
-      systems: _CanvasRenderer.__systems,
+      systems: _CanvasRenderer2.__systems,
       priority: [
@@ -39,14 +34,22 @@ "textureGenerator",
     };
-    this.setup(systemConfig);
-    if ("useContextAlpha" in options) {
-      deprecation("7.0.0", "options.useContextAlpha is deprecated, use options.backgroundAlpha instead");
-      options.backgroundAlpha = options.useContextAlpha === false ? 1 : options.backgroundAlpha;
-    }
-    this._plugin.rendererPlugins = _CanvasRenderer.__plugins;
-    this.options = options;
-    this.startup.run(this.options);
+    this.setup(systemConfig), "useContextAlpha" in options && (deprecation("7.0.0", "options.useContextAlpha is deprecated, use options.backgroundAlpha instead"), options.backgroundAlpha = options.useContextAlpha === !1 ? 1 : options.backgroundAlpha), this._plugin.rendererPlugins = _CanvasRenderer2.__plugins, this.options = options, this.startup.run(this.options);
   }
+  /**
+   * Used with autoDetectRenderer, this is always supported for any environment, so return true.
+   * @ignore
+   */
   static test() {
-    return true;
+    return !0;
   }
+  /**
+   * Useful function that returns a texture of the display object that can then be used to create sprites
+   * This can be quite useful if your displayObject is complicated and needs to be reused multiple times.
+   * @param displayObject - The displayObject the object will be generated from.
+   * @param {IGenerateTextureOptions} options - Generate texture options.
+   * @param {PIXI.Rectangle} options.region - The region of the displayObject, that shall be rendered,
+   *        if no region is specified, defaults to the local bounds of the displayObject.
+   * @param {number} [options.resolution] - If not given, the renderer's resolution is used.
+   * @param {PIXI.MSAA_QUALITY} [options.multisample] - If not given, the renderer's multisample is used.
+   * @returns A texture of the graphics object.
+   */
   generateTexture(displayObject, options) {
@@ -57,27 +60,58 @@ return this.textureGenerator.generateTexture(displayObject, options);
   }
+  /**
+   * Renders the object to its WebGL view.
+   * @param displayObject - The object to be rendered.
+   * @param options - Object to use for render options.
+   * @param {PIXI.RenderTexture} [options.renderTexture] - The render texture to render to.
+   * @param {boolean} [options.clear=true] - Should the canvas be cleared before the new render.
+   * @param {PIXI.Matrix} [options.transform] - A transform to apply to the render texture before rendering.
+   * @param {boolean} [options.skipUpdateTransform=false] - Should we skip the update transform pass?
+   */
   render(displayObject, options) {
     this.objectRenderer.render(displayObject, options);
   }
+  /** Clear the canvas of renderer. */
   clear() {
     this.canvasContext.clear();
   }
+  /**
+   * Removes everything from the renderer and optionally removes the Canvas DOM element.
+   * @param {boolean} [removeView=false] - Removes the Canvas element from the DOM.
+   */
   destroy(removeView) {
-    this.runners.destroy.items.reverse();
-    this.emitWithCustomOptions(this.runners.destroy, {
+    this.runners.destroy.items.reverse(), this.emitWithCustomOptions(this.runners.destroy, {
       _view: removeView
-    });
-    super.destroy();
+    }), super.destroy();
   }
+  /** Collection of plugins */
   get plugins() {
     return this._plugin.plugins;
   }
+  /**
+   * Resizes the canvas view to the specified width and height.
+   * @param desiredScreenWidth - the desired width of the screen
+   * @param desiredScreenHeight - the desired height of the screen
+   */
   resize(desiredScreenWidth, desiredScreenHeight) {
     this._view.resizeView(desiredScreenWidth, desiredScreenHeight);
   }
+  /**
+   * Same as view.width, actual number of pixels in the canvas by horizontal.
+   * @member {number}
+   * @readonly
+   * @default 800
+   */
   get width() {
     return this._view.element.width;
   }
+  /**
+   * Same as view.height, actual number of pixels in the canvas by vertical.
+   * @member {number}
+   * @readonly
+   * @default 600
+   */
   get height() {
     return this._view.element.height;
   }
+  /** The resolution / device pixel ratio of the renderer. */
   get resolution() {
@@ -87,96 +121,172 @@ return this._view.resolution;
   set resolution(value) {
-    this._view.resolution = value;
-    this.runners.resolutionChange.emit(value);
+    this._view.resolution = value, this.runners.resolutionChange.emit(value);
   }
+  /** Whether CSS dimensions of canvas view should be resized to screen dimensions automatically. */
   get autoDensity() {
     return this._view.autoDensity;
   }
+  /** The canvas element that everything is drawn to.*/
   get view() {
     return this._view.element;
   }
+  /**
+   * Measurements of the screen. (0, 0, screenWidth, screenHeight).
+   * Its safe to use as filterArea or hitArea for the whole stage.
+   */
   get screen() {
     return this._view.screen;
   }
+  /** the last object rendered by the renderer. Useful for other plugins like interaction managers */
   get lastObjectRendered() {
     return this.objectRenderer.lastObjectRendered;
   }
+  /** Flag if we are rendering to the screen vs renderTexture */
   get renderingToScreen() {
     return this.objectRenderer.renderingToScreen;
   }
+  /**
+   * This sets if the CanvasRenderer will clear the canvas or not before the new render pass.
+   * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every
+   * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect
+   * to clear the canvas every frame. Disable this by setting this to false. For example, if
+   * your game has a canvas filling background image you often don't need this set.
+   */
   get clearBeforeRender() {
     return this.background.clearBeforeRender;
   }
+  // deprecated zone..
+  /**
+   * Tracks the blend modes useful for this renderer.
+   * @deprecated since 7.0.0 use `renderer.canvasContext.blendModes` instead
+   */
   get blendModes() {
-    deprecation("7.0.0", "renderer.blendModes has been deprecated, please use renderer.canvasContext.blendModes instead");
-    return this.canvasContext.blendModes;
+    return deprecation("7.0.0", "renderer.blendModes has been deprecated, please use renderer.canvasContext.blendModes instead"), this.canvasContext.blendModes;
   }
+  /**
+   * system that manages canvas masks
+   * @deprecated since 7.0.0 use `renderer.canvasContext.mask`
+   */
   get maskManager() {
-    deprecation("7.0.0", "renderer.maskManager has been deprecated, please use renderer.mask instead");
-    return this.mask;
+    return deprecation("7.0.0", "renderer.maskManager has been deprecated, please use renderer.mask instead"), this.mask;
   }
+  /**
+   * Boolean flag controlling canvas refresh.
+   * @deprecated since 7.0.0
+   */
   get refresh() {
-    deprecation("7.0.0", "renderer.refresh has been deprecated");
-    return true;
+    return deprecation("7.0.0", "renderer.refresh has been deprecated"), !0;
   }
+  /**
+   * The root canvas 2d context that everything is drawn with.
+   * @deprecated since 7.0.0 Use `renderer.canvasContext.rootContext instead
+   */
   get rootContext() {
-    deprecation("7.0.0", "renderer.rootContext has been deprecated, please use renderer.canvasContext.rootContext instead");
-    return this.canvasContext.rootContext;
+    return deprecation("7.0.0", "renderer.rootContext has been deprecated, please use renderer.canvasContext.rootContext instead"), this.canvasContext.rootContext;
   }
+  /**
+   * The currently active canvas 2d context (could change with renderTextures)
+   * @deprecated since 7.0.0 Use `renderer.canvasContext.activeContext instead
+   */
   get context() {
-    deprecation("7.0.0", "renderer.context has been deprecated, please use renderer.canvasContext.activeContext instead");
-    return this.canvasContext.activeContext;
+    return deprecation("7.0.0", "renderer.context has been deprecated, please use renderer.canvasContext.activeContext instead"), this.canvasContext.activeContext;
   }
+  /**
+   * The canvas property used to set the canvas smoothing property.
+   * @deprecated since 7.0.0 Use `renderer.canvasContext.smoothProperty` instead.
+   */
   get smoothProperty() {
-    deprecation("7.0.0", "renderer.smoothProperty has been deprecated, please use renderer.canvasContext.smoothProperty instead");
-    return this.canvasContext.smoothProperty;
+    return deprecation("7.0.0", "renderer.smoothProperty has been deprecated, please use renderer.canvasContext.smoothProperty instead"), this.canvasContext.smoothProperty;
   }
+  /**
+   * Sets the blend mode of the renderer.
+   * @param {number} blendMode - See {@link PIXI.BLEND_MODES} for valid values.
+   * @param {boolean} [readyForOuterBlend=false] - Some blendModes are dangerous, they affect outer space of sprite.
+   * Pass `true` only if you are ready to use them.
+   * @deprecated since 7.0.0 Use `renderer.canvasContext.setBlendMode` instead.
+   */
   setBlendMode(blendMode, readyForOuterBlend) {
-    deprecation("7.0.0", "renderer.setBlendMode has been deprecated, use renderer.canvasContext.setBlendMode instead");
-    this.canvasContext.setBlendMode(blendMode, readyForOuterBlend);
+    deprecation("7.0.0", "renderer.setBlendMode has been deprecated, use renderer.canvasContext.setBlendMode instead"), this.canvasContext.setBlendMode(blendMode, readyForOuterBlend);
   }
+  /**
+   * Checks if blend mode has changed.
+   * @deprecated since 7.0.0 Use `renderer.canvasContext.invalidateBlendMode` instead.
+   */
   invalidateBlendMode() {
-    deprecation("7.0.0", "renderer.invalidateBlendMode has been deprecated, use renderer.canvasContext.invalidateBlendMode instead");
-    this.canvasContext.invalidateBlendMode();
+    deprecation("7.0.0", "renderer.invalidateBlendMode has been deprecated, use renderer.canvasContext.invalidateBlendMode instead"), this.canvasContext.invalidateBlendMode();
   }
+  /**
+   * Sets matrix of context.
+   * called only from render() methods
+   * takes care about resolution
+   * @param transform - world matrix of current element
+   * @param roundPixels - whether to round (tx,ty) coords
+   * @param localResolution - If specified, used instead of `renderer.resolution` for local scaling
+   * @deprecated since 7.0.0 - Use `renderer.canvasContext.setContextTransform` instead.
+   */
   setContextTransform(transform, roundPixels, localResolution) {
-    deprecation("7.0.0", "renderer.setContextTransform has been deprecated, use renderer.canvasContext.setContextTransform instead");
-    this.canvasContext.setContextTransform(transform, roundPixels, localResolution);
+    deprecation("7.0.0", "renderer.setContextTransform has been deprecated, use renderer.canvasContext.setContextTransform instead"), this.canvasContext.setContextTransform(transform, roundPixels, localResolution);
   }
+  /**
+   * The background color to fill if not transparent
+   * @deprecated since 7.0.0
+   */
   get backgroundColor() {
-    deprecation("7.0.0", "renderer.backgroundColor has been deprecated, use renderer.background.color instead.");
-    return this.background.color;
+    return deprecation("7.0.0", "renderer.backgroundColor has been deprecated, use renderer.background.color instead."), this.background.color;
   }
+  /**
+   * @deprecated since 7.0.0
+   * @ignore
+   */
   set backgroundColor(value) {
-    deprecation("7.0.0", "renderer.backgroundColor has been deprecated, use renderer.background.color instead.");
-    this.background.color = value;
+    deprecation("7.0.0", "renderer.backgroundColor has been deprecated, use renderer.background.color instead."), this.background.color = value;
   }
+  /**
+   * The background color alpha. Setting this to 0 will make the canvas transparent.
+   * @member {number}
+   * @deprecated since 7.0.0
+   */
   get backgroundAlpha() {
-    deprecation("7.0.0", "renderer.backgroundAlpha has been deprecated, use renderer.background.alpha instead.");
-    return this.background.alpha;
+    return deprecation("7.0.0", "renderer.backgroundAlpha has been deprecated, use renderer.background.alpha instead."), this.background.alpha;
   }
+  /**
+   * @deprecated since 7.0.0
+   * @ignore
+   */
   set backgroundAlpha(value) {
-    deprecation("7.0.0", "renderer.backgroundAlpha has been deprecated, use renderer.background.alpha instead.");
-    this.background.alpha = value;
+    deprecation("7.0.0", "renderer.backgroundAlpha has been deprecated, use renderer.background.alpha instead."), this.background.alpha = value;
   }
+  /**
+   * old abstract function not used by canvas renderer
+   * @deprecated since 7.0.0
+   */
   get preserveDrawingBuffer() {
-    deprecation("7.0.0", "renderer.preserveDrawingBuffer has been deprecated");
-    return false;
+    return deprecation("7.0.0", "renderer.preserveDrawingBuffer has been deprecated"), !1;
   }
+  /**
+   * old abstract function not used by canvas renderer
+   * @deprecated since 7.0.0
+   */
   get useContextAlpha() {
-    deprecation("7.0.0", "renderer.useContextAlpha has been deprecated");
-    return false;
+    return deprecation("7.0.0", "renderer.useContextAlpha has been deprecated"), !1;
   }
+  /**
+   * Collection of installed plugins. These are included by default in PIXI, but can be excluded
+   * by creating a custom build. Consult the README for more information about creating custom
+   * builds and excluding plugins.
+   * @member {object} plugins
+   * @readonly
+   * @property {PIXI.AccessibilityManager} accessibility Support tabbing interactive elements.
+   */
 };
-let CanvasRenderer = _CanvasRenderer;
-CanvasRenderer.extension = {
+_CanvasRenderer.extension = {
   type: core.ExtensionType.Renderer,
   priority: 0
-};
-CanvasRenderer.__plugins = {};
-CanvasRenderer.__systems = {};
+}, /** @private */
+_CanvasRenderer.__plugins = {}, /** @private */
+_CanvasRenderer.__systems = {};
+let CanvasRenderer = _CanvasRenderer;
 core.extensions.handleByMap(core.ExtensionType.CanvasRendererPlugin, CanvasRenderer.__plugins);
 core.extensions.handleByMap(core.ExtensionType.CanvasRendererSystem, CanvasRenderer.__systems);
 core.extensions.add(CanvasRenderer);
-
 exports.CanvasRenderer = CanvasRenderer;
 //# sourceMappingURL=CanvasRenderer.js.map

lib/canvasUtils.d.ts

@@ -58,2 +58,4 @@ import type { ICanvas, Texture } from '@pixi/core';
      * @memberof PIXI.canvasUtils
+     * @deprecated since 7.3.0
+     * @see PIXI.Color.round
      * @param {number} color - the color to round, should be a hex color
@@ -66,2 +68,3 @@ * @returns {number} The rounded color.
      * @memberof PIXI.canvasUtils
+     * @deprecated since 7.3.0
      * @type {number}
@@ -68,0 +71,0 @@ */

lib/canvasUtils.js

@@ -1,14 +0,15 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@pixi/core');
-var canUseNewCanvasBlendModes = require('./utils/canUseNewCanvasBlendModes.js');
-
+"use strict";
+var core = require("@pixi/core"), canUseNewCanvasBlendModes = require("./utils/canUseNewCanvasBlendModes.js");
 const canvasUtils = {
   canvas: null,
+  /**
+   * Basically this method just needs a sprite and a color and tints the sprite with the given color.
+   * @memberof PIXI.canvasUtils
+   * @param {PIXI.Sprite} sprite - the sprite to tint
+   * @param sprite.texture
+   * @param {number} color - the color to use to tint the sprite with
+   * @returns {ICanvas|HTMLImageElement} The tinted canvas
+   */
   getTintedCanvas: (sprite, color) => {
-    const texture = sprite.texture;
-    color = canvasUtils.roundColor(color);
-    const stringColor = `#${`00000${(color | 0).toString(16)}`.slice(-6)}`;
+    const texture = sprite.texture, stringColor = core.Color.shared.setValue(color).toHex();
     texture.tintCache = texture.tintCache || {};
@@ -18,108 +19,143 @@ const cachedCanvas = texture.tintCache[stringColor];
     if (cachedCanvas) {
-      if (cachedCanvas.tintId === texture._updateID) {
+      if (cachedCanvas.tintId === texture._updateID)
         return texture.tintCache[stringColor];
-      }
       canvas = texture.tintCache[stringColor];
-    } else {
+    } else
       canvas = core.settings.ADAPTER.createCanvas();
-    }
-    canvasUtils.tintMethod(texture, color, canvas);
-    canvas.tintId = texture._updateID;
-    if (canvasUtils.convertTintToImage && canvas.toDataURL !== void 0) {
+    if (canvasUtils.tintMethod(texture, color, canvas), canvas.tintId = texture._updateID, canvasUtils.convertTintToImage && canvas.toDataURL !== void 0) {
       const tintImage = new Image();
-      tintImage.src = canvas.toDataURL();
-      texture.tintCache[stringColor] = tintImage;
-    } else {
+      tintImage.src = canvas.toDataURL(), texture.tintCache[stringColor] = tintImage;
+    } else
       texture.tintCache[stringColor] = canvas;
-    }
     return canvas;
   },
+  /**
+   * Basically this method just needs a sprite and a color and tints the sprite with the given color.
+   * @memberof PIXI.canvasUtils
+   * @param {PIXI.Texture} texture - the sprite to tint
+   * @param {number} color - the color to use to tint the sprite with
+   * @returns {CanvasPattern} The tinted canvas
+   */
   getTintedPattern: (texture, color) => {
-    color = canvasUtils.roundColor(color);
-    const stringColor = `#${`00000${(color | 0).toString(16)}`.slice(-6)}`;
+    const stringColor = core.Color.shared.setValue(color).toHex();
     texture.patternCache = texture.patternCache || {};
     let pattern = texture.patternCache[stringColor];
-    if (pattern?.tintId === texture._updateID) {
-      return pattern;
-    }
-    if (!canvasUtils.canvas) {
-      canvasUtils.canvas = core.settings.ADAPTER.createCanvas();
-    }
-    canvasUtils.tintMethod(texture, color, canvasUtils.canvas);
-    pattern = canvasUtils.canvas.getContext("2d").createPattern(canvasUtils.canvas, "repeat");
-    pattern.tintId = texture._updateID;
-    texture.patternCache[stringColor] = pattern;
-    return pattern;
+    return pattern?.tintId === texture._updateID || (canvasUtils.canvas || (canvasUtils.canvas = core.settings.ADAPTER.createCanvas()), canvasUtils.tintMethod(texture, color, canvasUtils.canvas), pattern = canvasUtils.canvas.getContext("2d").createPattern(canvasUtils.canvas, "repeat"), pattern.tintId = texture._updateID, texture.patternCache[stringColor] = pattern), pattern;
   },
+  /**
+   * Tint a texture using the 'multiply' operation.
+   * @memberof PIXI.canvasUtils
+   * @param {PIXI.Texture} texture - the texture to tint
+   * @param {number} color - the color to use to tint the sprite with
+   * @param {PIXI.ICanvas} canvas - the current canvas
+   */
   tintWithMultiply: (texture, color, canvas) => {
-    const context = canvas.getContext("2d");
-    const crop = texture._frame.clone();
-    const resolution = texture.baseTexture.resolution;
-    crop.x *= resolution;
-    crop.y *= resolution;
-    crop.width *= resolution;
-    crop.height *= resolution;
-    canvas.width = Math.ceil(crop.width);
-    canvas.height = Math.ceil(crop.height);
-    context.save();
-    context.fillStyle = `#${`00000${(color | 0).toString(16)}`.slice(-6)}`;
-    context.fillRect(0, 0, crop.width, crop.height);
-    context.globalCompositeOperation = "multiply";
+    const context = canvas.getContext("2d"), crop = texture._frame.clone(), resolution = texture.baseTexture.resolution;
+    crop.x *= resolution, crop.y *= resolution, crop.width *= resolution, crop.height *= resolution, canvas.width = Math.ceil(crop.width), canvas.height = Math.ceil(crop.height), context.save(), context.fillStyle = core.Color.shared.setValue(color).toHex(), context.fillRect(0, 0, crop.width, crop.height), context.globalCompositeOperation = "multiply";
     const source = texture.baseTexture.getDrawableSource();
-    context.drawImage(source, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
-    context.globalCompositeOperation = "destination-atop";
-    context.drawImage(source, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
-    context.restore();
+    context.drawImage(
+      source,
+      crop.x,
+      crop.y,
+      crop.width,
+      crop.height,
+      0,
+      0,
+      crop.width,
+      crop.height
+    ), context.globalCompositeOperation = "destination-atop", context.drawImage(
+      source,
+      crop.x,
+      crop.y,
+      crop.width,
+      crop.height,
+      0,
+      0,
+      crop.width,
+      crop.height
+    ), context.restore();
   },
+  /**
+   * Tint a texture using the 'overlay' operation.
+   * @memberof PIXI.canvasUtils
+   * @param {PIXI.Texture} texture - the texture to tint
+   * @param {number} color - the color to use to tint the sprite with
+   * @param {PIXI.ICanvas} canvas - the current canvas
+   */
   tintWithOverlay: (texture, color, canvas) => {
-    const context = canvas.getContext("2d");
-    const crop = texture._frame.clone();
-    const resolution = texture.baseTexture.resolution;
-    crop.x *= resolution;
-    crop.y *= resolution;
-    crop.width *= resolution;
-    crop.height *= resolution;
-    canvas.width = Math.ceil(crop.width);
-    canvas.height = Math.ceil(crop.height);
-    context.save();
-    context.globalCompositeOperation = "copy";
-    context.fillStyle = `#${`00000${(color | 0).toString(16)}`.slice(-6)}`;
-    context.fillRect(0, 0, crop.width, crop.height);
-    context.globalCompositeOperation = "destination-atop";
-    context.drawImage(texture.baseTexture.getDrawableSource(), crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
-    context.restore();
+    const context = canvas.getContext("2d"), crop = texture._frame.clone(), resolution = texture.baseTexture.resolution;
+    crop.x *= resolution, crop.y *= resolution, crop.width *= resolution, crop.height *= resolution, canvas.width = Math.ceil(crop.width), canvas.height = Math.ceil(crop.height), context.save(), context.globalCompositeOperation = "copy", context.fillStyle = `#${`00000${(color | 0).toString(16)}`.slice(-6)}`, context.fillRect(0, 0, crop.width, crop.height), context.globalCompositeOperation = "destination-atop", context.drawImage(
+      texture.baseTexture.getDrawableSource(),
+      crop.x,
+      crop.y,
+      crop.width,
+      crop.height,
+      0,
+      0,
+      crop.width,
+      crop.height
+    ), context.restore();
   },
+  /**
+   * Tint a texture pixel per pixel.
+   * @memberof PIXI.canvasUtils
+   * @param {PIXI.Texture} texture - the texture to tint
+   * @param {number} color - the color to use to tint the sprite with
+   * @param {PIXI.ICanvas} canvas - the current canvas
+   */
   tintWithPerPixel: (texture, color, canvas) => {
-    const context = canvas.getContext("2d");
-    const crop = texture._frame.clone();
-    const resolution = texture.baseTexture.resolution;
-    crop.x *= resolution;
-    crop.y *= resolution;
-    crop.width *= resolution;
-    crop.height *= resolution;
-    canvas.width = Math.ceil(crop.width);
-    canvas.height = Math.ceil(crop.height);
-    context.save();
-    context.globalCompositeOperation = "copy";
-    context.drawImage(texture.baseTexture.getDrawableSource(), crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
-    context.restore();
-    const [r, g, b] = core.Color.shared.setValue(color).toArray();
-    const pixelData = context.getImageData(0, 0, crop.width, crop.height);
-    const pixels = pixelData.data;
-    for (let i = 0; i < pixels.length; i += 4) {
-      pixels[i + 0] *= r;
-      pixels[i + 1] *= g;
-      pixels[i + 2] *= b;
-    }
+    const context = canvas.getContext("2d"), crop = texture._frame.clone(), resolution = texture.baseTexture.resolution;
+    crop.x *= resolution, crop.y *= resolution, crop.width *= resolution, crop.height *= resolution, canvas.width = Math.ceil(crop.width), canvas.height = Math.ceil(crop.height), context.save(), context.globalCompositeOperation = "copy", context.drawImage(
+      texture.baseTexture.getDrawableSource(),
+      crop.x,
+      crop.y,
+      crop.width,
+      crop.height,
+      0,
+      0,
+      crop.width,
+      crop.height
+    ), context.restore();
+    const [r, g, b] = core.Color.shared.setValue(color).toArray(), pixelData = context.getImageData(0, 0, crop.width, crop.height), pixels = pixelData.data;
+    for (let i = 0; i < pixels.length; i += 4)
+      pixels[i + 0] *= r, pixels[i + 1] *= g, pixels[i + 2] *= b;
     context.putImageData(pixelData, 0, 0);
   },
-  roundColor: (color) => core.Color.shared.setValue(color).round(canvasUtils.cacheStepsPerColorChannel).toNumber(),
+  /**
+   * Rounds the specified color according to the canvasUtils.cacheStepsPerColorChannel.
+   * @memberof PIXI.canvasUtils
+   * @deprecated since 7.3.0
+   * @see PIXI.Color.round
+   * @param {number} color - the color to round, should be a hex color
+   * @returns {number} The rounded color.
+   */
+  roundColor: (color) => (core.utils.deprecation("7.3.0", "PIXI.canvasUtils.roundColor is deprecated"), core.Color.shared.setValue(color).round(canvasUtils.cacheStepsPerColorChannel).toNumber()),
+  /**
+   * Number of steps which will be used as a cap when rounding colors.
+   * @memberof PIXI.canvasUtils
+   * @deprecated since 7.3.0
+   * @type {number}
+   */
   cacheStepsPerColorChannel: 8,
-  convertTintToImage: false,
+  /**
+   * Tint cache boolean flag.
+   * @memberof PIXI.canvasUtils
+   * @type {boolean}
+   */
+  convertTintToImage: !1,
+  /**
+   * Whether or not the Canvas BlendModes are supported, consequently the ability to tint using the multiply method.
+   * @memberof PIXI.canvasUtils
+   * @type {boolean}
+   */
   canUseMultiply: canUseNewCanvasBlendModes.canUseNewCanvasBlendModes(),
+  /**
+   * The tinting method that will be used.
+   * @memberof PIXI.canvasUtils
+   * @type {Function}
+   */
   tintMethod: null
 };
 canvasUtils.tintMethod = canvasUtils.canUseMultiply ? canvasUtils.tintWithMultiply : canvasUtils.tintWithPerPixel;
-
 exports.canvasUtils = canvasUtils;
 //# sourceMappingURL=canvasUtils.js.map

lib/index.js

@@ -1,15 +0,4 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('./BaseTexture.js');
-var CanvasContextSystem = require('./CanvasContextSystem.js');
-var CanvasMaskSystem = require('./CanvasMaskSystem.js');
-var CanvasObjectRendererSystem = require('./CanvasObjectRendererSystem.js');
-var CanvasRenderer = require('./CanvasRenderer.js');
-var canvasUtils = require('./canvasUtils.js');
-var canUseNewCanvasBlendModes = require('./utils/canUseNewCanvasBlendModes.js');
-
-
-
+"use strict";
+require("./BaseTexture.js");
+var CanvasContextSystem = require("./CanvasContextSystem.js"), CanvasMaskSystem = require("./CanvasMaskSystem.js"), CanvasObjectRendererSystem = require("./CanvasObjectRendererSystem.js"), CanvasRenderer = require("./CanvasRenderer.js"), canvasUtils = require("./canvasUtils.js"), canUseNewCanvasBlendModes = require("./utils/canUseNewCanvasBlendModes.js");
 exports.CanvasContextSystem = CanvasContextSystem.CanvasContextSystem;
@@ -16,0 +5,0 @@ exports.CanvasMaskSystem = CanvasMaskSystem.CanvasMaskSystem;

lib/utils/canUseNewCanvasBlendModes.js

@@ -1,33 +0,19 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@pixi/core');
-
+"use strict";
+var core = require("@pixi/core");
 let canUseNewCanvasBlendModesValue;
 function createColoredCanvas(color) {
-  const canvas = core.settings.ADAPTER.createCanvas(6, 1);
-  const context = canvas.getContext("2d");
-  context.fillStyle = color;
-  context.fillRect(0, 0, 6, 1);
-  return canvas;
+  const canvas = core.settings.ADAPTER.createCanvas(6, 1), context = canvas.getContext("2d");
+  return context.fillStyle = color, context.fillRect(0, 0, 6, 1), canvas;
 }
 function canUseNewCanvasBlendModes() {
-  if (typeof document === "undefined") {
-    return false;
-  }
-  if (canUseNewCanvasBlendModesValue !== void 0) {
+  if (typeof document > "u")
+    return !1;
+  if (canUseNewCanvasBlendModesValue !== void 0)
     return canUseNewCanvasBlendModesValue;
-  }
-  const magenta = createColoredCanvas("#ff00ff");
-  const yellow = createColoredCanvas("#ffff00");
-  const canvas = core.settings.ADAPTER.createCanvas(6, 1);
-  const context = canvas.getContext("2d");
-  context.globalCompositeOperation = "multiply";
-  context.drawImage(magenta, 0, 0);
-  context.drawImage(yellow, 2, 0);
+  const magenta = createColoredCanvas("#ff00ff"), yellow = createColoredCanvas("#ffff00"), context = core.settings.ADAPTER.createCanvas(6, 1).getContext("2d");
+  context.globalCompositeOperation = "multiply", context.drawImage(magenta, 0, 0), context.drawImage(yellow, 2, 0);
   const imageData = context.getImageData(2, 0, 1, 1);
-  if (!imageData) {
-    canUseNewCanvasBlendModesValue = false;
-  } else {
+  if (!imageData)
+    canUseNewCanvasBlendModesValue = !1;
+  else {
     const data = imageData.data;
@@ -38,4 +24,3 @@ canUseNewCanvasBlendModesValue = data[0] === 255 && data[1] === 0 && data[2] === 0;
 }
-
 exports.canUseNewCanvasBlendModes = canUseNewCanvasBlendModes;
 //# sourceMappingURL=canUseNewCanvasBlendModes.js.map

lib/utils/mapCanvasBlendModesToPixi.js

@@ -1,62 +0,7 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@pixi/core');
-var canUseNewCanvasBlendModes = require('./canUseNewCanvasBlendModes.js');
-
+"use strict";
+var core = require("@pixi/core"), canUseNewCanvasBlendModes = require("./canUseNewCanvasBlendModes.js");
 function mapCanvasBlendModesToPixi(array = []) {
-  if (canUseNewCanvasBlendModes.canUseNewCanvasBlendModes()) {
-    array[core.BLEND_MODES.NORMAL] = "source-over";
-    array[core.BLEND_MODES.ADD] = "lighter";
-    array[core.BLEND_MODES.MULTIPLY] = "multiply";
-    array[core.BLEND_MODES.SCREEN] = "screen";
-    array[core.BLEND_MODES.OVERLAY] = "overlay";
-    array[core.BLEND_MODES.DARKEN] = "darken";
-    array[core.BLEND_MODES.LIGHTEN] = "lighten";
-    array[core.BLEND_MODES.COLOR_DODGE] = "color-dodge";
-    array[core.BLEND_MODES.COLOR_BURN] = "color-burn";
-    array[core.BLEND_MODES.HARD_LIGHT] = "hard-light";
-    array[core.BLEND_MODES.SOFT_LIGHT] = "soft-light";
-    array[core.BLEND_MODES.DIFFERENCE] = "difference";
-    array[core.BLEND_MODES.EXCLUSION] = "exclusion";
-    array[core.BLEND_MODES.HUE] = "hue";
-    array[core.BLEND_MODES.SATURATION] = "saturation";
-    array[core.BLEND_MODES.COLOR] = "color";
-    array[core.BLEND_MODES.LUMINOSITY] = "luminosity";
-  } else {
-    array[core.BLEND_MODES.NORMAL] = "source-over";
-    array[core.BLEND_MODES.ADD] = "lighter";
-    array[core.BLEND_MODES.MULTIPLY] = "source-over";
-    array[core.BLEND_MODES.SCREEN] = "source-over";
-    array[core.BLEND_MODES.OVERLAY] = "source-over";
-    array[core.BLEND_MODES.DARKEN] = "source-over";
-    array[core.BLEND_MODES.LIGHTEN] = "source-over";
-    array[core.BLEND_MODES.COLOR_DODGE] = "source-over";
-    array[core.BLEND_MODES.COLOR_BURN] = "source-over";
-    array[core.BLEND_MODES.HARD_LIGHT] = "source-over";
-    array[core.BLEND_MODES.SOFT_LIGHT] = "source-over";
-    array[core.BLEND_MODES.DIFFERENCE] = "source-over";
-    array[core.BLEND_MODES.EXCLUSION] = "source-over";
-    array[core.BLEND_MODES.HUE] = "source-over";
-    array[core.BLEND_MODES.SATURATION] = "source-over";
-    array[core.BLEND_MODES.COLOR] = "source-over";
-    array[core.BLEND_MODES.LUMINOSITY] = "source-over";
-  }
-  array[core.BLEND_MODES.NORMAL_NPM] = array[core.BLEND_MODES.NORMAL];
-  array[core.BLEND_MODES.ADD_NPM] = array[core.BLEND_MODES.ADD];
-  array[core.BLEND_MODES.SCREEN_NPM] = array[core.BLEND_MODES.SCREEN];
-  array[core.BLEND_MODES.SRC_IN] = "source-in";
-  array[core.BLEND_MODES.SRC_OUT] = "source-out";
-  array[core.BLEND_MODES.SRC_ATOP] = "source-atop";
-  array[core.BLEND_MODES.DST_OVER] = "destination-over";
-  array[core.BLEND_MODES.DST_IN] = "destination-in";
-  array[core.BLEND_MODES.DST_OUT] = "destination-out";
-  array[core.BLEND_MODES.DST_ATOP] = "destination-atop";
-  array[core.BLEND_MODES.XOR] = "xor";
-  array[core.BLEND_MODES.SUBTRACT] = "source-over";
-  return array;
+  return canUseNewCanvasBlendModes.canUseNewCanvasBlendModes() ? (array[core.BLEND_MODES.NORMAL] = "source-over", array[core.BLEND_MODES.ADD] = "lighter", array[core.BLEND_MODES.MULTIPLY] = "multiply", array[core.BLEND_MODES.SCREEN] = "screen", array[core.BLEND_MODES.OVERLAY] = "overlay", array[core.BLEND_MODES.DARKEN] = "darken", array[core.BLEND_MODES.LIGHTEN] = "lighten", array[core.BLEND_MODES.COLOR_DODGE] = "color-dodge", array[core.BLEND_MODES.COLOR_BURN] = "color-burn", array[core.BLEND_MODES.HARD_LIGHT] = "hard-light", array[core.BLEND_MODES.SOFT_LIGHT] = "soft-light", array[core.BLEND_MODES.DIFFERENCE] = "difference", array[core.BLEND_MODES.EXCLUSION] = "exclusion", array[core.BLEND_MODES.HUE] = "hue", array[core.BLEND_MODES.SATURATION] = "saturation", array[core.BLEND_MODES.COLOR] = "color", array[core.BLEND_MODES.LUMINOSITY] = "luminosity") : (array[core.BLEND_MODES.NORMAL] = "source-over", array[core.BLEND_MODES.ADD] = "lighter", array[core.BLEND_MODES.MULTIPLY] = "source-over", array[core.BLEND_MODES.SCREEN] = "source-over", array[core.BLEND_MODES.OVERLAY] = "source-over", array[core.BLEND_MODES.DARKEN] = "source-over", array[core.BLEND_MODES.LIGHTEN] = "source-over", array[core.BLEND_MODES.COLOR_DODGE] = "source-over", array[core.BLEND_MODES.COLOR_BURN] = "source-over", array[core.BLEND_MODES.HARD_LIGHT] = "source-over", array[core.BLEND_MODES.SOFT_LIGHT] = "source-over", array[core.BLEND_MODES.DIFFERENCE] = "source-over", array[core.BLEND_MODES.EXCLUSION] = "source-over", array[core.BLEND_MODES.HUE] = "source-over", array[core.BLEND_MODES.SATURATION] = "source-over", array[core.BLEND_MODES.COLOR] = "source-over", array[core.BLEND_MODES.LUMINOSITY] = "source-over"), array[core.BLEND_MODES.NORMAL_NPM] = array[core.BLEND_MODES.NORMAL], array[core.BLEND_MODES.ADD_NPM] = array[core.BLEND_MODES.ADD], array[core.BLEND_MODES.SCREEN_NPM] = array[core.BLEND_MODES.SCREEN], array[core.BLEND_MODES.SRC_IN] = "source-in", array[core.BLEND_MODES.SRC_OUT] = "source-out", array[core.BLEND_MODES.SRC_ATOP] = "source-atop", array[core.BLEND_MODES.DST_OVER] = "destination-over", array[core.BLEND_MODES.DST_IN] = "destination-in", array[core.BLEND_MODES.DST_OUT] = "destination-out", array[core.BLEND_MODES.DST_ATOP] = "destination-atop", array[core.BLEND_MODES.XOR] = "xor", array[core.BLEND_MODES.SUBTRACT] = "source-over", array;
 }
-
 exports.mapCanvasBlendModesToPixi = mapCanvasBlendModesToPixi;
 //# sourceMappingURL=mapCanvasBlendModesToPixi.js.map

package.json

 {
   "name": "@pixi/canvas-renderer",
-  "version": "7.2.4",
+  "version": "7.3.0-rc",
   "main": "lib/index.js",
@@ -39,4 +39,4 @@ "module": "lib/index.mjs",
   "peerDependencies": {
-    "@pixi/core": "7.2.4"
+    "@pixi/core": "7.3.0-rc"
   }
 }

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

2102

increased by1.64%

Worsened metrics

Total package byte prevSize

256491

decreased by-3.22%

Number of low quality alerts

2

increased byInfinity%

No dependency changes