Socket
Socket
Sign inDemoInstall

@pixi/canvas-renderer

Package Overview
Dependencies
Maintainers
1
Versions
122
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pixi/canvas-renderer - npm Package Compare versions

Comparing version 5.2.4 to 5.3.0

973

dist/canvas-renderer.js
/*!
* @pixi/canvas-renderer - v5.2.4
* Compiled Sun, 03 May 2020 22:38:52 UTC
* @pixi/canvas-renderer - v5.3.0
* Compiled Thu, 18 Jun 2020 23:27:40 UTC
*

@@ -12,201 +12,347 @@ * @pixi/canvas-renderer is licensed under the MIT License.

/**
* A set of functions used to handle masking.
*
* Sprite masking is not supported on the CanvasRenderer.
*
* @class
* @memberof PIXI
*/
var CanvasMaskManager = function CanvasMaskManager(renderer)
{
this.renderer = renderer;
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
this._foundShapes = [];
};
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
/**
* This method adds it to the current stack of masks.
*
* @param {PIXI.MaskData | PIXI.Graphics} maskData - the maskData that will be pushed
*/
CanvasMaskManager.prototype.pushMask = function pushMask (maskData)
{
var renderer = this.renderer;
var maskObject = maskData.isMaskData ? maskData.maskObject : maskData;
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
renderer.context.save();
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) { if (b.hasOwnProperty(p)) { d[p] = b[p]; } } };
return extendStatics(d, b);
};
// TODO support sprite alpha masks??
// lots of effort required. If demand is great enough..
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var foundShapes = this._foundShapes;
var __assign = function() {
__assign = Object.assign || function __assign(t) {
var arguments$1 = arguments;
this.recursiveFindShapes(maskObject, foundShapes);
if (foundShapes.length > 0)
{
var context = renderer.context;
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments$1[i];
for (var p in s) { if (Object.prototype.hasOwnProperty.call(s, p)) { t[p] = s[p]; } }
}
return t;
};
return __assign.apply(this, arguments);
};
context.beginPath();
function __rest(s, e) {
var t = {};
for (var p in s) { if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
{ t[p] = s[p]; } }
if (s != null && typeof Object.getOwnPropertySymbols === "function")
{ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0)
{ t[p[i]] = s[p[i]]; } } }
return t;
}
for (var i = 0; i < foundShapes.length; i++)
{
var shape = foundShapes[i];
var transform = shape.transform.worldTransform;
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") { r = Reflect.decorate(decorators, target, key, desc); }
else { for (var i = decorators.length - 1; i >= 0; i--) { if (d = decorators[i]) { r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; } } }
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
this.renderer.setContextTransform(transform);
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
}
this.renderGraphicsShape(shape);
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(metadataKey, metadataValue); }
}
foundShapes.length = 0;
context.clip();
}
};
function __awaiter(thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
/**
* Renders all PIXI.Graphics shapes in a subtree.
*
* @param {PIXI.Container} container - container to scan.
* @param {PIXI.Graphics[]} out - where to put found shapes
*/
CanvasMaskManager.prototype.recursiveFindShapes = function recursiveFindShapes (container, out)
{
if (container.geometry && container.geometry.graphicsData)
{
out.push(container);
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) { throw t[1]; } return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) { throw new TypeError("Generator is already executing."); }
while (_) { try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) { return t; }
if (y = 0, t) { op = [op[0] & 2, t.value]; }
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) { _.ops.pop(); }
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } }
if (op[0] & 5) { throw op[1]; } return { value: op[0] ? op[1] : void 0, done: true };
}
}
var children = container.children;
function __exportStar(m, exports) {
for (var p in m) { if (!exports.hasOwnProperty(p)) { exports[p] = m[p]; } }
}
if (children)
{
for (var i = 0; i < children.length; i++)
{
this.recursiveFindShapes(children[i], out);
function __values(o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m) { return m.call(o); }
return {
next: function () {
if (o && i >= o.length) { o = void 0; }
return { value: o && o[i++], done: !o };
}
}
};
};
}
/**
* Renders a PIXI.Graphics shape.
*
* @param {PIXI.Graphics} graphics - The object to render.
*/
CanvasMaskManager.prototype.renderGraphicsShape = function renderGraphicsShape (graphics)
{
graphics.finishPoly();
var context = this.renderer.context;
var graphicsData = graphics.geometry.graphicsData;
var len = graphicsData.length;
if (len === 0)
{
return;
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) { return o; }
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) { ar.push(r.value); }
}
for (var i = 0; i < len; i++)
{
var data = graphicsData[i];
var shape = data.shape;
if (data.type === math.SHAPES.POLY)
{
var points = shape.points;
context.moveTo(points[0], points[1]);
for (var j = 1; j < points.length / 2; j++)
{
context.lineTo(points[j * 2], points[(j * 2) + 1]);
}
// if the first and last point are the same close the path - much neater :)
if (points[0] === points[points.length - 2] && points[1] === points[points.length - 1])
{
context.closePath();
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) { m.call(i); }
}
else if (data.type === math.SHAPES.RECT)
{
context.rect(shape.x, shape.y, shape.width, shape.height);
context.closePath();
}
else if (data.type === math.SHAPES.CIRC)
{
// TODO - need to be Undefined!
context.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
context.closePath();
}
else if (data.type === math.SHAPES.ELIP)
{
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
finally { if (e) { throw e.error; } }
}
return ar;
}
var w = shape.width * 2;
var h = shape.height * 2;
function __spread() {
var arguments$1 = arguments;
var x = shape.x - (w / 2);
var y = shape.y - (h / 2);
for (var ar = [], i = 0; i < arguments.length; i++)
{ ar = ar.concat(__read(arguments$1[i])); }
return ar;
}
var kappa = 0.5522848;
var ox = (w / 2) * kappa; // control point offset horizontal
var oy = (h / 2) * kappa; // control point offset vertical
var xe = x + w; // x-end
var ye = y + h; // y-end
var xm = x + (w / 2); // x-middle
var ym = y + (h / 2); // y-middle
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
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 (data.type === math.SHAPES.RREC)
{
var rx = shape.x;
var ry = shape.y;
var width = shape.width;
var height = shape.height;
var radius = shape.radius;
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator) { throw new TypeError("Symbol.asyncIterator is not defined."); }
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; } }
function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length) { resume(q[0][0], q[0][1]); } }
}
var maxRadius = Math.min(width, height) / 2 | 0;
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
radius = radius > maxRadius ? maxRadius : radius;
function __asyncValues(o) {
if (!Symbol.asyncIterator) { throw new TypeError("Symbol.asyncIterator is not defined."); }
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
}
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();
}
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
/**
* Restores the current drawing context to the state it was before the mask was applied.
*
* @param {PIXI.CanvasRenderer} renderer - The renderer context to use.
*/
CanvasMaskManager.prototype.popMask = function popMask (renderer)
{
renderer.context.restore();
renderer.invalidateBlendMode();
};
function __importStar(mod) {
if (mod && mod.__esModule) { return mod; }
var result = {};
if (mod != null) { for (var k in mod) { if (Object.hasOwnProperty.call(mod, k)) { result[k] = mod[k]; } } }
result.default = mod;
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
/**
* Destroys this canvas mask manager.
* A set of functions used to handle masking.
*
* Sprite masking is not supported on the CanvasRenderer.
*
* @class
* @memberof PIXI
*/
CanvasMaskManager.prototype.destroy = function destroy ()
{
/* empty */
};
var CanvasMaskManager = /** @class */ (function () {
/**
* @param {PIXI.CanvasRenderer} renderer - The canvas renderer.
*/
function CanvasMaskManager(renderer) {
this.renderer = renderer;
this._foundShapes = [];
}
/**
* This method adds it to the current stack of masks.
*
* @param {PIXI.MaskData | PIXI.Graphics} maskData - the maskData that will be pushed
*/
CanvasMaskManager.prototype.pushMask = function (maskData) {
var renderer = this.renderer;
var maskObject = (maskData.maskObject || maskData);
renderer.context.save();
// TODO support sprite alpha masks??
// lots of effort required. If demand is great enough..
var foundShapes = this._foundShapes;
this.recursiveFindShapes(maskObject, foundShapes);
if (foundShapes.length > 0) {
var context = renderer.context;
context.beginPath();
for (var i = 0; i < foundShapes.length; i++) {
var shape = foundShapes[i];
var transform = shape.transform.worldTransform;
this.renderer.setContextTransform(transform);
this.renderGraphicsShape(shape);
}
foundShapes.length = 0;
context.clip();
}
};
/**
* Renders all PIXI.Graphics shapes in a subtree.
*
* @param {PIXI.Container} container - container to scan.
* @param {PIXI.Graphics[]} out - where to put found shapes
*/
CanvasMaskManager.prototype.recursiveFindShapes = function (container, out) {
if (container.geometry && container.geometry.graphicsData) {
out.push(container);
}
var children = container.children;
if (children) {
for (var i = 0; i < children.length; i++) {
this.recursiveFindShapes(children[i], out);
}
}
};
/**
* Renders a PIXI.Graphics shape.
*
* @param {PIXI.Graphics} graphics - The object to render.
*/
CanvasMaskManager.prototype.renderGraphicsShape = function (graphics) {
graphics.finishPoly();
var context = this.renderer.context;
var graphicsData = graphics.geometry.graphicsData;
var len = graphicsData.length;
if (len === 0) {
return;
}
for (var i = 0; i < len; i++) {
var data = graphicsData[i];
var shape = data.shape;
if (shape.type === math.SHAPES.POLY) {
var points = shape.points;
context.moveTo(points[0], points[1]);
for (var j = 1; j < points.length / 2; j++) {
context.lineTo(points[j * 2], points[(j * 2) + 1]);
}
// if the first and last point are the same close the path - much neater :)
if (points[0] === points[points.length - 2] && points[1] === points[points.length - 1]) {
context.closePath();
}
}
else if (shape.type === math.SHAPES.RECT) {
context.rect(shape.x, shape.y, shape.width, shape.height);
context.closePath();
}
else if (shape.type === math.SHAPES.CIRC) {
// TODO - need to be Undefined!
context.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
context.closePath();
}
else if (shape.type === math.SHAPES.ELIP) {
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
var w = shape.width * 2;
var h = shape.height * 2;
var x = shape.x - (w / 2);
var y = shape.y - (h / 2);
var kappa = 0.5522848;
var ox = (w / 2) * kappa; // control point offset horizontal
var oy = (h / 2) * kappa; // control point offset vertical
var xe = x + w; // x-end
var ye = y + h; // y-end
var xm = x + (w / 2); // x-middle
var ym = y + (h / 2); // y-middle
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 === math.SHAPES.RREC) {
var rx = shape.x;
var ry = shape.y;
var width = shape.width;
var height = shape.height;
var radius = shape.radius;
var maxRadius = Math.min(width, height) / 2 | 0;
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 {PIXI.CanvasRenderer} renderer - The renderer context to use.
*/
CanvasMaskManager.prototype.popMask = function (renderer) {
renderer.context.restore();
renderer.invalidateBlendMode();
};
/**
* Destroys this canvas mask manager.
*
*/
CanvasMaskManager.prototype.destroy = function () {
/* empty */
};
return CanvasMaskManager;
}());

@@ -220,17 +366,11 @@ /**

*/
function createColoredCanvas(color)
{
function createColoredCanvas(color) {
var canvas = document.createElement('canvas');
canvas.width = 6;
canvas.height = 1;
var context = canvas.getContext('2d');
context.fillStyle = color;
context.fillRect(0, 0, 6, 1);
return canvas;
}
/**

@@ -242,32 +382,20 @@ * Checks whether the Canvas BlendModes are supported by the current browser

*/
function canUseNewCanvasBlendModes()
{
if (typeof document === 'undefined')
{
function canUseNewCanvasBlendModes() {
if (typeof document === 'undefined') {
return false;
}
var magenta = createColoredCanvas('#ff00ff');
var yellow = createColoredCanvas('#ffff00');
var canvas = document.createElement('canvas');
canvas.width = 6;
canvas.height = 1;
var context = canvas.getContext('2d');
context.globalCompositeOperation = 'multiply';
context.drawImage(magenta, 0, 0);
context.drawImage(yellow, 2, 0);
var imageData = context.getImageData(2, 0, 1, 1);
if (!imageData)
{
if (!imageData) {
return false;
}
var data = imageData.data;
return (data[0] === 255 && data[1] === 0 && data[2] === 0);

@@ -285,8 +413,5 @@ }

*/
function mapCanvasBlendModesToPixi(array)
{
if ( array === void 0 ) array = [];
if (canUseNewCanvasBlendModes())
{
function mapCanvasBlendModesToPixi(array) {
if (array === void 0) { array = []; }
if (canUseNewCanvasBlendModes()) {
array[constants.BLEND_MODES.NORMAL] = 'source-over';

@@ -310,4 +435,3 @@ array[constants.BLEND_MODES.ADD] = 'lighter'; // IS THIS OK???

}
else
{
else {
// this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough'

@@ -336,3 +460,2 @@ array[constants.BLEND_MODES.NORMAL] = 'source-over';

array[constants.BLEND_MODES.SCREEN_NPM] = array[constants.BLEND_MODES.SCREEN];
// composite operations

@@ -347,6 +470,4 @@ array[constants.BLEND_MODES.SRC_IN] = 'source-in';

array[constants.BLEND_MODES.XOR] = 'xor';
// SUBTRACT from flash, does not exist in canvas
array[constants.BLEND_MODES.SUBTRACT] = 'source-over';
return array;

@@ -356,3 +477,2 @@ }

var tempMatrix = new math.Matrix();
/**

@@ -368,9 +488,24 @@ * The CanvasRenderer draws the scene and all its content onto a 2d canvas.

*/
var CanvasRenderer = /*@__PURE__*/(function (AbstractRenderer) {
function CanvasRenderer(options, arg2, arg3)
{
AbstractRenderer.call(this, 'Canvas', options, arg2, arg3);
this.type = constants.RENDERER_TYPE.CANVAS;
var CanvasRenderer = /** @class */ (function (_super) {
__extends(CanvasRenderer, _super);
/**
* @param {object} [options] - The optional renderer parameters
* @param {number} [options.width=800] - the width of the screen
* @param {number} [options.height=600] - the height of the screen
* @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional
* @param {boolean} [options.transparent=false] - If the render view is transparent, default false
* @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for
* resolutions other than 1
* @param {boolean} [options.antialias=false] - sets antialias
* @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The
* resolution of the renderer retina would be 2.
* @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation,
* enable this if you need to call toDataUrl on the webgl context.
* @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or
* not before the new render pass.
* @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area
* (shown if not transparent).
*/
function CanvasRenderer(options) {
var _this = _super.call(this, constants.RENDERER_TYPE.CANVAS, options) || this;
/**

@@ -381,4 +516,3 @@ * The root canvas 2d context that everything is drawn with.

*/
this.rootContext = this.view.getContext('2d', { alpha: this.transparent });
_this.rootContext = _this.view.getContext('2d', { alpha: _this.transparent });
/**

@@ -389,4 +523,3 @@ * The currently active canvas 2d context (could change with renderTextures)

*/
this.context = this.rootContext;
_this.context = _this.rootContext;
/**

@@ -397,4 +530,3 @@ * Boolean flag controlling canvas refresh.

*/
this.refresh = true;
_this.refresh = true;
/**

@@ -405,4 +537,3 @@ * Instance of a CanvasMaskManager, handles masking when using the canvas renderer.

*/
this.maskManager = new CanvasMaskManager(this);
_this.maskManager = new CanvasMaskManager(_this);
/**

@@ -413,26 +544,19 @@ * The canvas property used to set the canvas smoothing property.

*/
this.smoothProperty = 'imageSmoothingEnabled';
if (!this.rootContext.imageSmoothingEnabled)
{
if (this.rootContext.webkitImageSmoothingEnabled)
{
this.smoothProperty = 'webkitImageSmoothingEnabled';
_this.smoothProperty = 'imageSmoothingEnabled';
if (!_this.rootContext.imageSmoothingEnabled) {
var rc = _this.rootContext;
if (rc.webkitImageSmoothingEnabled) {
_this.smoothProperty = 'webkitImageSmoothingEnabled';
}
else if (this.rootContext.mozImageSmoothingEnabled)
{
this.smoothProperty = 'mozImageSmoothingEnabled';
else if (rc.mozImageSmoothingEnabled) {
_this.smoothProperty = 'mozImageSmoothingEnabled';
}
else if (this.rootContext.oImageSmoothingEnabled)
{
this.smoothProperty = 'oImageSmoothingEnabled';
else if (rc.oImageSmoothingEnabled) {
_this.smoothProperty = 'oImageSmoothingEnabled';
}
else if (this.rootContext.msImageSmoothingEnabled)
{
this.smoothProperty = 'msImageSmoothingEnabled';
else if (rc.msImageSmoothingEnabled) {
_this.smoothProperty = 'msImageSmoothingEnabled';
}
}
this.initPlugins(CanvasRenderer.__plugins);
_this.initPlugins(CanvasRenderer.__plugins);
/**

@@ -443,6 +567,5 @@ * Tracks the blend modes useful for this renderer.

*/
this.blendModes = mapCanvasBlendModesToPixi();
this._activeBlendMode = null;
this._outerBlend = false;
_this.blendModes = mapCanvasBlendModesToPixi();
_this._activeBlendMode = null;
_this._outerBlend = false;
/**

@@ -453,8 +576,5 @@ * Projection transform, passed in render() stored here

*/
this._projTransform = null;
this.renderingToScreen = false;
_this._projTransform = null;
_this.renderingToScreen = false;
utils.sayHello('Canvas');
/**

@@ -465,3 +585,2 @@ * Fired after rendering finishes.

*/
/**

@@ -472,10 +591,5 @@ * Fired before rendering starts.

*/
this.resize(this.options.width, this.options.height);
_this.resize(_this.options.width, _this.options.height);
return _this;
}
if ( AbstractRenderer ) CanvasRenderer.__proto__ = AbstractRenderer;
CanvasRenderer.prototype = Object.create( AbstractRenderer && AbstractRenderer.prototype );
CanvasRenderer.prototype.constructor = CanvasRenderer;
/**

@@ -487,63 +601,38 @@ * Renders the object to this canvas view

* If unset, it will render to the root context.
* @param {boolean} [clear=false] - Whether to clear the canvas before drawing
* @param {boolean} [clear=this.clearBeforeRender] - Whether to clear the canvas before drawing
* @param {PIXI.Matrix} [transform] - A transformation to be applied
* @param {boolean} [skipUpdateTransform=false] - Whether to skip the update transform
*/
CanvasRenderer.prototype.render = function render (displayObject, renderTexture, clear, transform, skipUpdateTransform)
{
if (!this.view)
{
CanvasRenderer.prototype.render = function (displayObject, renderTexture, clear, transform, skipUpdateTransform) {
if (!this.view) {
return;
}
// can be handy to know!
this.renderingToScreen = !renderTexture;
this.emit('prerender');
var rootResolution = this.resolution;
if (renderTexture)
{
renderTexture = renderTexture.baseTexture || renderTexture;
if (!renderTexture._canvasRenderTarget)
{
renderTexture._canvasRenderTarget = new utils.CanvasRenderTarget(
renderTexture.width,
renderTexture.height,
renderTexture.resolution
);
if (renderTexture) {
renderTexture = renderTexture.castToBaseTexture();
if (!renderTexture._canvasRenderTarget) {
renderTexture._canvasRenderTarget = new utils.CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution);
renderTexture.resource = new core.resources.CanvasResource(renderTexture._canvasRenderTarget.canvas);
renderTexture.valid = true;
}
this.context = renderTexture._canvasRenderTarget.context;
this.resolution = renderTexture._canvasRenderTarget.resolution;
}
else
{
else {
this.context = this.rootContext;
}
var context = this.context;
this._projTransform = transform || null;
if (!renderTexture)
{
if (!renderTexture) {
this._lastObjectRendered = displayObject;
}
if (!skipUpdateTransform)
{
if (!skipUpdateTransform) {
// update the scene graph
var cacheParent = displayObject.parent;
displayObject.parent = this._tempDisplayObjectParent;
var cacheParent = displayObject.enableTempParent();
displayObject.updateTransform();
displayObject.parent = cacheParent;
// displayObject.hitArea = //TODO add a temp hit area
displayObject.disableTempParent(cacheParent);
}
context.save();

@@ -555,36 +644,32 @@ context.setTransform(1, 0, 0, 1, 0, 0);

context.globalCompositeOperation = this.blendModes[constants.BLEND_MODES.NORMAL];
if (clear !== undefined ? clear : this.clearBeforeRender)
{
if (this.renderingToScreen)
{
if (this.transparent)
{
if (clear !== undefined ? clear : this.clearBeforeRender) {
if (this.renderingToScreen) {
if (this.transparent) {
context.clearRect(0, 0, this.width, this.height);
}
else
{
else {
context.fillStyle = this._backgroundColorString;
context.fillRect(0, 0, this.width, this.height);
}
} // else {
// TODO: implement background for CanvasRenderTarget or RenderTexture?
// }
}
else {
renderTexture = renderTexture;
renderTexture._canvasRenderTarget.clear();
var clearColor = renderTexture.clearColor;
if (clearColor[3] > 0) {
context.fillStyle = utils.hex2string(utils.rgb2hex(clearColor));
context.fillRect(0, 0, renderTexture.realWidth, renderTexture.realHeight);
}
}
}
// TODO RENDER TARGET STUFF HERE..
var tempContext = this.context;
this.context = context;
displayObject.renderCanvas(this);
this.context = tempContext;
context.restore();
this.resolution = rootResolution;
this._projTransform = null;
this.emit('postrender');
};
/**

@@ -594,16 +679,12 @@ * sets matrix of context

* takes care about resolution
* @param {PIXI.Matrix} transform world matrix of current element
* @param {boolean} [roundPixels] whether to round (tx,ty) coords
* @param {number} [localResolution] If specified, used instead of `renderer.resolution` for local scaling
* @param {PIXI.Matrix} transform - world matrix of current element
* @param {boolean} [roundPixels] - whether to round (tx,ty) coords
* @param {number} [localResolution] - If specified, used instead of `renderer.resolution` for local scaling
*/
CanvasRenderer.prototype.setContextTransform = function setContextTransform (transform, roundPixels, localResolution)
{
CanvasRenderer.prototype.setContextTransform = function (transform, roundPixels, localResolution) {
var mat = transform;
var proj = this._projTransform;
var resolution = this.resolution;
localResolution = localResolution || resolution;
if (proj)
{
if (proj) {
mat = tempMatrix;

@@ -613,27 +694,9 @@ mat.copyFrom(transform);

}
if (roundPixels)
{
this.context.setTransform(
mat.a * localResolution,
mat.b * localResolution,
mat.c * localResolution,
mat.d * localResolution,
(mat.tx * resolution) | 0,
(mat.ty * resolution) | 0
);
if (roundPixels) {
this.context.setTransform(mat.a * localResolution, mat.b * localResolution, mat.c * localResolution, mat.d * localResolution, (mat.tx * resolution) | 0, (mat.ty * resolution) | 0);
}
else
{
this.context.setTransform(
mat.a * localResolution,
mat.b * localResolution,
mat.c * localResolution,
mat.d * localResolution,
mat.tx * resolution,
mat.ty * resolution
);
else {
this.context.setTransform(mat.a * localResolution, mat.b * localResolution, mat.c * localResolution, mat.d * localResolution, mat.tx * resolution, mat.ty * resolution);
}
};
/**

@@ -644,19 +707,13 @@ * Clear the canvas of renderer.

*/
CanvasRenderer.prototype.clear = function clear (clearColor)
{
CanvasRenderer.prototype.clear = function (clearColor) {
var context = this.context;
clearColor = clearColor || this._backgroundColorString;
if (!this.transparent && clearColor)
{
if (!this.transparent && clearColor) {
context.fillStyle = clearColor;
context.fillRect(0, 0, this.width, this.height);
}
else
{
else {
context.clearRect(0, 0, this.width, this.height);
}
};
/**

@@ -669,4 +726,3 @@ * Sets the blend mode of the renderer.

*/
CanvasRenderer.prototype.setBlendMode = function setBlendMode (blendMode, readyForOuterBlend)
{
CanvasRenderer.prototype.setBlendMode = function (blendMode, readyForOuterBlend) {
var outerBlend = blendMode === constants.BLEND_MODES.SRC_IN

@@ -676,13 +732,8 @@ || blendMode === constants.BLEND_MODES.SRC_OUT

|| blendMode === constants.BLEND_MODES.DST_ATOP;
if (!readyForOuterBlend && outerBlend)
{
if (!readyForOuterBlend && outerBlend) {
blendMode = constants.BLEND_MODES.NORMAL;
}
if (this._activeBlendMode === blendMode)
{
if (this._activeBlendMode === blendMode) {
return;
}
this._activeBlendMode = blendMode;

@@ -692,3 +743,2 @@ this._outerBlend = outerBlend;

};
/**

@@ -699,17 +749,11 @@ * Removes everything from the renderer and optionally removes the Canvas DOM element.

*/
CanvasRenderer.prototype.destroy = function destroy (removeView)
{
CanvasRenderer.prototype.destroy = function (removeView) {
// call the base destroy
AbstractRenderer.prototype.destroy.call(this, removeView);
_super.prototype.destroy.call(this, removeView);
this.context = null;
this.refresh = true;
this.maskManager.destroy();
this.maskManager = null;
this.smoothProperty = null;
};
/**

@@ -723,22 +767,16 @@ * Resizes the canvas view to the specified width and height.

*/
CanvasRenderer.prototype.resize = function resize (screenWidth, screenHeight)
{
AbstractRenderer.prototype.resize.call(this, screenWidth, screenHeight);
CanvasRenderer.prototype.resize = function (screenWidth, screenHeight) {
_super.prototype.resize.call(this, screenWidth, screenHeight);
// reset the scale mode.. oddly this seems to be reset when the canvas is resized.
// surely a browser bug?? Let PixiJS fix that for you..
if (this.smoothProperty)
{
if (this.smoothProperty) {
this.rootContext[this.smoothProperty] = (settings.settings.SCALE_MODE === constants.SCALE_MODES.LINEAR);
}
};
/**
* Checks if blend mode has changed.
*/
CanvasRenderer.prototype.invalidateBlendMode = function invalidateBlendMode ()
{
CanvasRenderer.prototype.invalidateBlendMode = function () {
this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation);
};
/**

@@ -751,8 +789,7 @@ * Collection of installed plugins. These are included by default in PIXI, but can be excluded

* @readonly
* @property {PIXI.accessibility.AccessibilityManager} accessibility Support tabbing interactive elements.
* @property {PIXI.AccessibilityManager} accessibility Support tabbing interactive elements.
* @property {PIXI.CanvasExtract} extract Extract image data from renderer.
* @property {PIXI.interaction.InteractionManager} interaction Handles mouse, touch and pointer events.
* @property {PIXI.InteractionManager} interaction Handles mouse, touch and pointer events.
* @property {PIXI.CanvasPrepare} prepare Pre-render display objects.
*/
/**

@@ -765,8 +802,6 @@ * Adds a plugin to the renderer.

*/
CanvasRenderer.registerPlugin = function registerPlugin (pluginName, ctor)
{
CanvasRenderer.registerPlugin = function (pluginName, ctor) {
CanvasRenderer.__plugins = CanvasRenderer.__plugins || {};
CanvasRenderer.__plugins[pluginName] = ctor;
};
return CanvasRenderer;

@@ -785,2 +820,3 @@ }(core.AbstractRenderer));

var canvasUtils = {
canvas: null,
/**

@@ -796,48 +832,29 @@ * Basically this method just needs a sprite and a color and tints the sprite with the given color.

var texture = sprite.texture;
color = canvasUtils.roundColor(color);
var stringColor = "#" + ((("00000" + ((color | 0).toString(16)))).substr(-6));
var stringColor = "#" + ("00000" + (color | 0).toString(16)).substr(-6);
texture.tintCache = texture.tintCache || {};
var cachedCanvas = texture.tintCache[stringColor];
var canvas;
if (cachedCanvas)
{
if (cachedCanvas.tintId === texture._updateID)
{
if (cachedCanvas) {
if (cachedCanvas.tintId === texture._updateID) {
return texture.tintCache[stringColor];
}
canvas = texture.tintCache[stringColor];
}
else
{
else {
canvas = document.createElement('canvas');
}
canvasUtils.tintMethod(texture, color, canvas);
canvas.tintId = texture._updateID;
if (canvasUtils.convertTintToImage)
{
if (canvasUtils.convertTintToImage) {
// is this better?
var tintImage = new Image();
tintImage.src = canvas.toDataURL();
texture.tintCache[stringColor] = tintImage;
}
else
{
else {
texture.tintCache[stringColor] = canvas;
}
return canvas;
},
/**

@@ -847,3 +864,3 @@ * 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 {PIXI.Texture} texture - the sprite to tint
* @param {number} color - the color to use to tint the sprite with

@@ -854,15 +871,9 @@ * @return {HTMLCanvasElement} The tinted canvas

color = canvasUtils.roundColor(color);
var stringColor = "#" + ((("00000" + ((color | 0).toString(16)))).substr(-6));
var stringColor = "#" + ("00000" + (color | 0).toString(16)).substr(-6);
texture.patternCache = texture.patternCache || {};
var pattern = texture.patternCache[stringColor];
if (pattern && pattern.tintId === texture._updateID)
{
if (pattern && pattern.tintId === texture._updateID) {
return pattern;
}
if (!canvasUtils.canvas)
{
if (!canvasUtils.canvas) {
canvasUtils.canvas = document.createElement('canvas');

@@ -874,6 +885,4 @@ }

texture.patternCache[stringColor] = pattern;
return pattern;
},
/**

@@ -891,3 +900,2 @@ * Tint a texture using the 'multiply' operation.

var resolution = texture.baseTexture.resolution;
crop.x *= resolution;

@@ -897,43 +905,14 @@ crop.y *= 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)))).substr(-6));
context.fillStyle = "#" + ("00000" + (color | 0).toString(16)).substr(-6);
context.fillRect(0, 0, crop.width, crop.height);
context.globalCompositeOperation = 'multiply';
var source = texture.baseTexture.getDrawableSource();
context.drawImage(
source,
crop.x,
crop.y,
crop.width,
crop.height,
0,
0,
crop.width,
crop.height
);
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.drawImage(source, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
context.restore();
},
/**

@@ -947,8 +926,6 @@ * Tint a texture using the 'overlay' operation.

*/
tintWithOverlay: function tintWithOverlay(texture, color, canvas)
{
tintWithOverlay: function (texture, color, canvas) {
var context = canvas.getContext('2d');
var crop = texture._frame.clone();
var resolution = texture.baseTexture.resolution;
crop.x *= resolution;

@@ -958,28 +935,13 @@ crop.y *= 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)))).substr(-6));
context.fillStyle = "#" + ("00000" + (color | 0).toString(16)).substr(-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.drawImage(texture.baseTexture.getDrawableSource(), crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
// context.globalCompositeOperation = 'copy';
context.restore();
},
/**

@@ -997,3 +959,2 @@ * Tint a texture pixel per pixel.

var resolution = texture.baseTexture.resolution;
crop.x *= resolution;

@@ -1003,21 +964,8 @@ crop.y *= 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.drawImage(texture.baseTexture.getDrawableSource(), crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
context.restore();
var rgbValues = utils.hex2rgb(color);

@@ -1027,9 +975,5 @@ var r = rgbValues[0];

var b = rgbValues[2];
var pixelData = context.getImageData(0, 0, crop.width, crop.height);
var pixels = pixelData.data;
for (var i = 0; i < pixels.length; i += 4)
{
for (var i = 0; i < pixels.length; i += 4) {
pixels[i + 0] *= r;

@@ -1039,6 +983,4 @@ pixels[i + 1] *= g;

}
context.putImageData(pixelData, 0, 0);
},
/**

@@ -1053,12 +995,8 @@ * Rounds the specified color according to the canvasUtils.cacheStepsPerColorChannel.

var step = canvasUtils.cacheStepsPerColorChannel;
var rgbValues = utils.hex2rgb(color);
rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step);
rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step);
rgbValues[2] = Math.min(255, (rgbValues[2] / step) * step);
return utils.rgb2hex(rgbValues);
},
/**

@@ -1071,3 +1009,2 @@ * Number of steps which will be used as a cap when rounding colors.

cacheStepsPerColorChannel: 8,
/**

@@ -1080,3 +1017,2 @@ * Tint cache boolean flag.

convertTintToImage: false,
/**

@@ -1089,3 +1025,2 @@ * Whether or not the Canvas BlendModes are supported, consequently the ability to tint using the multiply method.

canUseMultiply: canUseNewCanvasBlendModes(),
/**

@@ -1097,7 +1032,4 @@ * The tinting method that will be used.

*/
tintMethod: function () { // jslint-disable no-empty-function
},
tintMethod: null,
};
canvasUtils.tintMethod = canvasUtils.canUseMultiply ? canvasUtils.tintWithMultiply : canvasUtils.tintWithPerPixel;

@@ -1107,3 +1039,2 @@

var parentCreate = core.Renderer.create;
/**

@@ -1114,18 +1045,12 @@ * Override the Renderer.create to fallback to use CanvasRenderer.

*/
core.Renderer.create = function create(options)
{
core.Renderer.create = function create(options) {
var forceCanvas = options && options.forceCanvas;
if (!forceCanvas)
{
try
{
if (!forceCanvas) {
try {
return parentCreate(options);
}
catch (err)
{
catch (err) {
// swallow WebGL-unsupported error
}
}
return new CanvasRenderer(options);

@@ -1141,8 +1066,16 @@ };

*/
core.BaseTexture.prototype.getDrawableSource = function getDrawableSource()
{
core.BaseTexture.prototype.getDrawableSource = function getDrawableSource() {
var resource = this.resource;
return resource ? (resource.bitmap || resource.source) : null;
};
/**
* A reference to the canvas render target (we only need one as this can be shared across renderers)
*
* @protected
* @member {PIXI.utils.CanvasRenderTarget} _canvasRenderTarget
* @memberof PIXI.BaseRenderTexture#
*/
core.BaseRenderTexture.prototype._canvasRenderTarget = null;
core.Texture.prototype.patternCache = null;
core.Texture.prototype.tintCache = null;

@@ -1149,0 +1082,0 @@ exports.CanvasRenderer = CanvasRenderer;

6

dist/canvas-renderer.min.js
/*!
* @pixi/canvas-renderer - v5.2.4
* Compiled Sun, 03 May 2020 22:38:52 UTC
* @pixi/canvas-renderer - v5.3.0
* Compiled Thu, 18 Jun 2020 23:27:40 UTC
*

@@ -8,3 +8,3 @@ * @pixi/canvas-renderer is licensed under the MIT License.

*/
this.PIXI=this.PIXI||{};var _pixi_canvas_renderer=function(t,e,r,o,i,n){"use strict";var a=function(t){this.renderer=t,this._foundShapes=[]};function s(t){var e=document.createElement("canvas");e.width=6,e.height=1;var r=e.getContext("2d");return r.fillStyle=t,r.fillRect(0,0,6,1),e}function h(){if("undefined"==typeof document)return!1;var t=s("#ff00ff"),e=s("#ffff00"),r=document.createElement("canvas");r.width=6,r.height=1;var o=r.getContext("2d");o.globalCompositeOperation="multiply",o.drawImage(t,0,0),o.drawImage(e,2,0);var i=o.getImageData(2,0,1,1);if(!i)return!1;var n=i.data;return 255===n[0]&&0===n[1]&&0===n[2]}a.prototype.pushMask=function(t){var e=this.renderer,r=t.isMaskData?t.maskObject:t;e.context.save();var o=this._foundShapes;if(this.recursiveFindShapes(r,o),o.length>0){var i=e.context;i.beginPath();for(var n=0;n<o.length;n++){var a=o[n],s=a.transform.worldTransform;this.renderer.setContextTransform(s),this.renderGraphicsShape(a)}o.length=0,i.clip()}},a.prototype.recursiveFindShapes=function(t,e){t.geometry&&t.geometry.graphicsData&&e.push(t);var r=t.children;if(r)for(var o=0;o<r.length;o++)this.recursiveFindShapes(r[o],e)},a.prototype.renderGraphicsShape=function(t){t.finishPoly();var e=this.renderer.context,r=t.geometry.graphicsData,i=r.length;if(0!==i)for(var n=0;n<i;n++){var a=r[n],s=a.shape;if(a.type===o.SHAPES.POLY){var h=s.points;e.moveTo(h[0],h[1]);for(var l=1;l<h.length/2;l++)e.lineTo(h[2*l],h[2*l+1]);h[0]===h[h.length-2]&&h[1]===h[h.length-1]&&e.closePath()}else if(a.type===o.SHAPES.RECT)e.rect(s.x,s.y,s.width,s.height),e.closePath();else if(a.type===o.SHAPES.CIRC)e.arc(s.x,s.y,s.radius,0,2*Math.PI),e.closePath();else if(a.type===o.SHAPES.ELIP){var c=2*s.width,d=2*s.height,E=s.x-c/2,u=s.y-d/2,D=c/2*.5522848,p=d/2*.5522848,g=E+c,S=u+d,_=E+c/2,v=u+d/2;e.moveTo(E,v),e.bezierCurveTo(E,v-p,_-D,u,_,u),e.bezierCurveTo(_+D,u,g,v-p,g,v),e.bezierCurveTo(g,v+p,_+D,S,_,S),e.bezierCurveTo(_-D,S,E,v+p,E,v),e.closePath()}else if(a.type===o.SHAPES.RREC){var O=s.x,M=s.y,m=s.width,f=s.height,N=s.radius,C=Math.min(m,f)/2|0;N=N>C?C:N,e.moveTo(O,M+N),e.lineTo(O,M+f-N),e.quadraticCurveTo(O,M+f,O+N,M+f),e.lineTo(O+m-N,M+f),e.quadraticCurveTo(O+m,M+f,O+m,M+f-N),e.lineTo(O+m,M+N),e.quadraticCurveTo(O+m,M,O+m-N,M),e.lineTo(O+N,M),e.quadraticCurveTo(O,M,O,M+N),e.closePath()}}},a.prototype.popMask=function(t){t.context.restore(),t.invalidateBlendMode()},a.prototype.destroy=function(){};var l=new o.Matrix,c=function(t){function o(e,n,s){var l;t.call(this,"Canvas",e,n,s),this.type=i.RENDERER_TYPE.CANVAS,this.rootContext=this.view.getContext("2d",{alpha:this.transparent}),this.context=this.rootContext,this.refresh=!0,this.maskManager=new a(this),this.smoothProperty="imageSmoothingEnabled",this.rootContext.imageSmoothingEnabled||(this.rootContext.webkitImageSmoothingEnabled?this.smoothProperty="webkitImageSmoothingEnabled":this.rootContext.mozImageSmoothingEnabled?this.smoothProperty="mozImageSmoothingEnabled":this.rootContext.oImageSmoothingEnabled?this.smoothProperty="oImageSmoothingEnabled":this.rootContext.msImageSmoothingEnabled&&(this.smoothProperty="msImageSmoothingEnabled")),this.initPlugins(o.__plugins),this.blendModes=(void 0===l&&(l=[]),h()?(l[i.BLEND_MODES.NORMAL]="source-over",l[i.BLEND_MODES.ADD]="lighter",l[i.BLEND_MODES.MULTIPLY]="multiply",l[i.BLEND_MODES.SCREEN]="screen",l[i.BLEND_MODES.OVERLAY]="overlay",l[i.BLEND_MODES.DARKEN]="darken",l[i.BLEND_MODES.LIGHTEN]="lighten",l[i.BLEND_MODES.COLOR_DODGE]="color-dodge",l[i.BLEND_MODES.COLOR_BURN]="color-burn",l[i.BLEND_MODES.HARD_LIGHT]="hard-light",l[i.BLEND_MODES.SOFT_LIGHT]="soft-light",l[i.BLEND_MODES.DIFFERENCE]="difference",l[i.BLEND_MODES.EXCLUSION]="exclusion",l[i.BLEND_MODES.HUE]="hue",l[i.BLEND_MODES.SATURATION]="saturate",l[i.BLEND_MODES.COLOR]="color",l[i.BLEND_MODES.LUMINOSITY]="luminosity"):(l[i.BLEND_MODES.NORMAL]="source-over",l[i.BLEND_MODES.ADD]="lighter",l[i.BLEND_MODES.MULTIPLY]="source-over",l[i.BLEND_MODES.SCREEN]="source-over",l[i.BLEND_MODES.OVERLAY]="source-over",l[i.BLEND_MODES.DARKEN]="source-over",l[i.BLEND_MODES.LIGHTEN]="source-over",l[i.BLEND_MODES.COLOR_DODGE]="source-over",l[i.BLEND_MODES.COLOR_BURN]="source-over",l[i.BLEND_MODES.HARD_LIGHT]="source-over",l[i.BLEND_MODES.SOFT_LIGHT]="source-over",l[i.BLEND_MODES.DIFFERENCE]="source-over",l[i.BLEND_MODES.EXCLUSION]="source-over",l[i.BLEND_MODES.HUE]="source-over",l[i.BLEND_MODES.SATURATION]="source-over",l[i.BLEND_MODES.COLOR]="source-over",l[i.BLEND_MODES.LUMINOSITY]="source-over"),l[i.BLEND_MODES.NORMAL_NPM]=l[i.BLEND_MODES.NORMAL],l[i.BLEND_MODES.ADD_NPM]=l[i.BLEND_MODES.ADD],l[i.BLEND_MODES.SCREEN_NPM]=l[i.BLEND_MODES.SCREEN],l[i.BLEND_MODES.SRC_IN]="source-in",l[i.BLEND_MODES.SRC_OUT]="source-out",l[i.BLEND_MODES.SRC_ATOP]="source-atop",l[i.BLEND_MODES.DST_OVER]="destination-over",l[i.BLEND_MODES.DST_IN]="destination-in",l[i.BLEND_MODES.DST_OUT]="destination-out",l[i.BLEND_MODES.DST_ATOP]="destination-atop",l[i.BLEND_MODES.XOR]="xor",l[i.BLEND_MODES.SUBTRACT]="source-over",l),this._activeBlendMode=null,this._outerBlend=!1,this._projTransform=null,this.renderingToScreen=!1,r.sayHello("Canvas"),this.resize(this.options.width,this.options.height)}return t&&(o.__proto__=t),o.prototype=Object.create(t&&t.prototype),o.prototype.constructor=o,o.prototype.render=function(t,o,n,a,s){if(this.view){this.renderingToScreen=!o,this.emit("prerender");var h=this.resolution;o?((o=o.baseTexture||o)._canvasRenderTarget||(o._canvasRenderTarget=new r.CanvasRenderTarget(o.width,o.height,o.resolution),o.resource=new e.resources.CanvasResource(o._canvasRenderTarget.canvas),o.valid=!0),this.context=o._canvasRenderTarget.context,this.resolution=o._canvasRenderTarget.resolution):this.context=this.rootContext;var l=this.context;if(this._projTransform=a||null,o||(this._lastObjectRendered=t),!s){var c=t.parent;t.parent=this._tempDisplayObjectParent,t.updateTransform(),t.parent=c}l.save(),l.setTransform(1,0,0,1,0,0),l.globalAlpha=1,this._activeBlendMode=i.BLEND_MODES.NORMAL,this._outerBlend=!1,l.globalCompositeOperation=this.blendModes[i.BLEND_MODES.NORMAL],(void 0!==n?n:this.clearBeforeRender)&&this.renderingToScreen&&(this.transparent?l.clearRect(0,0,this.width,this.height):(l.fillStyle=this._backgroundColorString,l.fillRect(0,0,this.width,this.height)));var d=this.context;this.context=l,t.renderCanvas(this),this.context=d,l.restore(),this.resolution=h,this._projTransform=null,this.emit("postrender")}},o.prototype.setContextTransform=function(t,e,r){var o=t,i=this._projTransform,n=this.resolution;r=r||n,i&&((o=l).copyFrom(t),o.prepend(i)),e?this.context.setTransform(o.a*r,o.b*r,o.c*r,o.d*r,o.tx*n|0,o.ty*n|0):this.context.setTransform(o.a*r,o.b*r,o.c*r,o.d*r,o.tx*n,o.ty*n)},o.prototype.clear=function(t){var e=this.context;t=t||this._backgroundColorString,!this.transparent&&t?(e.fillStyle=t,e.fillRect(0,0,this.width,this.height)):e.clearRect(0,0,this.width,this.height)},o.prototype.setBlendMode=function(t,e){var r=t===i.BLEND_MODES.SRC_IN||t===i.BLEND_MODES.SRC_OUT||t===i.BLEND_MODES.DST_IN||t===i.BLEND_MODES.DST_ATOP;!e&&r&&(t=i.BLEND_MODES.NORMAL),this._activeBlendMode!==t&&(this._activeBlendMode=t,this._outerBlend=r,this.context.globalCompositeOperation=this.blendModes[t])},o.prototype.destroy=function(e){t.prototype.destroy.call(this,e),this.context=null,this.refresh=!0,this.maskManager.destroy(),this.maskManager=null,this.smoothProperty=null},o.prototype.resize=function(e,r){t.prototype.resize.call(this,e,r),this.smoothProperty&&(this.rootContext[this.smoothProperty]=n.settings.SCALE_MODE===i.SCALE_MODES.LINEAR)},o.prototype.invalidateBlendMode=function(){this._activeBlendMode=this.blendModes.indexOf(this.context.globalCompositeOperation)},o.registerPlugin=function(t,e){o.__plugins=o.__plugins||{},o.__plugins[t]=e},o}(e.AbstractRenderer),d={getTintedCanvas:function(t,e){var r=t.texture,o="#"+("00000"+(0|(e=d.roundColor(e))).toString(16)).substr(-6);r.tintCache=r.tintCache||{};var i,n=r.tintCache[o];if(n){if(n.tintId===r._updateID)return r.tintCache[o];i=r.tintCache[o]}else i=document.createElement("canvas");if(d.tintMethod(r,e,i),i.tintId=r._updateID,d.convertTintToImage){var a=new Image;a.src=i.toDataURL(),r.tintCache[o]=a}else r.tintCache[o]=i;return i},getTintedPattern:function(t,e){var r="#"+("00000"+(0|(e=d.roundColor(e))).toString(16)).substr(-6);t.patternCache=t.patternCache||{};var o=t.patternCache[r];return o&&o.tintId===t._updateID?o:(d.canvas||(d.canvas=document.createElement("canvas")),d.tintMethod(t,e,d.canvas),(o=d.canvas.getContext("2d").createPattern(d.canvas,"repeat")).tintId=t._updateID,t.patternCache[r]=o,o)},tintWithMultiply:function(t,e,r){var o=r.getContext("2d"),i=t._frame.clone(),n=t.baseTexture.resolution;i.x*=n,i.y*=n,i.width*=n,i.height*=n,r.width=Math.ceil(i.width),r.height=Math.ceil(i.height),o.save(),o.fillStyle="#"+("00000"+(0|e).toString(16)).substr(-6),o.fillRect(0,0,i.width,i.height),o.globalCompositeOperation="multiply";var a=t.baseTexture.getDrawableSource();o.drawImage(a,i.x,i.y,i.width,i.height,0,0,i.width,i.height),o.globalCompositeOperation="destination-atop",o.drawImage(a,i.x,i.y,i.width,i.height,0,0,i.width,i.height),o.restore()},tintWithOverlay:function(t,e,r){var o=r.getContext("2d"),i=t._frame.clone(),n=t.baseTexture.resolution;i.x*=n,i.y*=n,i.width*=n,i.height*=n,r.width=Math.ceil(i.width),r.height=Math.ceil(i.height),o.save(),o.globalCompositeOperation="copy",o.fillStyle="#"+("00000"+(0|e).toString(16)).substr(-6),o.fillRect(0,0,i.width,i.height),o.globalCompositeOperation="destination-atop",o.drawImage(t.baseTexture.getDrawableSource(),i.x,i.y,i.width,i.height,0,0,i.width,i.height),o.restore()},tintWithPerPixel:function(t,e,o){var i=o.getContext("2d"),n=t._frame.clone(),a=t.baseTexture.resolution;n.x*=a,n.y*=a,n.width*=a,n.height*=a,o.width=Math.ceil(n.width),o.height=Math.ceil(n.height),i.save(),i.globalCompositeOperation="copy",i.drawImage(t.baseTexture.getDrawableSource(),n.x,n.y,n.width,n.height,0,0,n.width,n.height),i.restore();for(var s=r.hex2rgb(e),h=s[0],l=s[1],c=s[2],d=i.getImageData(0,0,n.width,n.height),E=d.data,u=0;u<E.length;u+=4)E[u+0]*=h,E[u+1]*=l,E[u+2]*=c;i.putImageData(d,0,0)},roundColor:function(t){var e=d.cacheStepsPerColorChannel,o=r.hex2rgb(t);return o[0]=Math.min(255,o[0]/e*e),o[1]=Math.min(255,o[1]/e*e),o[2]=Math.min(255,o[2]/e*e),r.rgb2hex(o)},cacheStepsPerColorChannel:8,convertTintToImage:!1,canUseMultiply:h(),tintMethod:function(){}};d.tintMethod=d.canUseMultiply?d.tintWithMultiply:d.tintWithPerPixel;var E=e.Renderer.create;return e.Renderer.create=function(t){if(!(t&&t.forceCanvas))try{return E(t)}catch(t){}return new c(t)},e.BaseTexture.prototype.getDrawableSource=function(){var t=this.resource;return t?t.bitmap||t.source:null},t.CanvasRenderer=c,t.canUseNewCanvasBlendModes=h,t.canvasUtils=d,t}({},PIXI,PIXI.utils,PIXI,PIXI,PIXI);Object.assign(this.PIXI,_pixi_canvas_renderer);
this.PIXI=this.PIXI||{};var _pixi_canvas_renderer=function(e,t,r,o,n,i){"use strict";var a=function(e,t){return(a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)};var s=function(){function e(e){this.renderer=e,this._foundShapes=[]}return e.prototype.pushMask=function(e){var t=this.renderer,r=e.maskObject||e;t.context.save();var o=this._foundShapes;if(this.recursiveFindShapes(r,o),o.length>0){var n=t.context;n.beginPath();for(var i=0;i<o.length;i++){var a=o[i],s=a.transform.worldTransform;this.renderer.setContextTransform(s),this.renderGraphicsShape(a)}o.length=0,n.clip()}},e.prototype.recursiveFindShapes=function(e,t){e.geometry&&e.geometry.graphicsData&&t.push(e);var r=e.children;if(r)for(var o=0;o<r.length;o++)this.recursiveFindShapes(r[o],t)},e.prototype.renderGraphicsShape=function(e){e.finishPoly();var t=this.renderer.context,r=e.geometry.graphicsData,n=r.length;if(0!==n)for(var i=0;i<n;i++){var a=r[i].shape;if(a.type===o.SHAPES.POLY){var s=a.points;t.moveTo(s[0],s[1]);for(var h=1;h<s.length/2;h++)t.lineTo(s[2*h],s[2*h+1]);s[0]===s[s.length-2]&&s[1]===s[s.length-1]&&t.closePath()}else if(a.type===o.SHAPES.RECT)t.rect(a.x,a.y,a.width,a.height),t.closePath();else if(a.type===o.SHAPES.CIRC)t.arc(a.x,a.y,a.radius,0,2*Math.PI),t.closePath();else if(a.type===o.SHAPES.ELIP){var l=2*a.width,c=2*a.height,d=a.x-l/2,u=a.y-c/2,E=l/2*.5522848,D=c/2*.5522848,p=d+l,g=u+c,_=d+l/2,S=u+c/2;t.moveTo(d,S),t.bezierCurveTo(d,S-D,_-E,u,_,u),t.bezierCurveTo(_+E,u,p,S-D,p,S),t.bezierCurveTo(p,S+D,_+E,g,_,g),t.bezierCurveTo(_-E,g,d,S+D,d,S),t.closePath()}else if(a.type===o.SHAPES.RREC){var v=a.x,O=a.y,M=a.width,f=a.height,m=a.radius,N=Math.min(M,f)/2|0;m=m>N?N:m,t.moveTo(v,O+m),t.lineTo(v,O+f-m),t.quadraticCurveTo(v,O+f,v+m,O+f),t.lineTo(v+M-m,O+f),t.quadraticCurveTo(v+M,O+f,v+M,O+f-m),t.lineTo(v+M,O+m),t.quadraticCurveTo(v+M,O,v+M-m,O),t.lineTo(v+m,O),t.quadraticCurveTo(v,O,v,O+m),t.closePath()}}},e.prototype.popMask=function(e){e.context.restore(),e.invalidateBlendMode()},e.prototype.destroy=function(){},e}();function h(e){var t=document.createElement("canvas");t.width=6,t.height=1;var r=t.getContext("2d");return r.fillStyle=e,r.fillRect(0,0,6,1),t}function l(){if("undefined"==typeof document)return!1;var e=h("#ff00ff"),t=h("#ffff00"),r=document.createElement("canvas");r.width=6,r.height=1;var o=r.getContext("2d");o.globalCompositeOperation="multiply",o.drawImage(e,0,0),o.drawImage(t,2,0);var n=o.getImageData(2,0,1,1);if(!n)return!1;var i=n.data;return 255===i[0]&&0===i[1]&&0===i[2]}var c=new o.Matrix,d=function(e){function o(t){var i,a=e.call(this,n.RENDERER_TYPE.CANVAS,t)||this;if(a.rootContext=a.view.getContext("2d",{alpha:a.transparent}),a.context=a.rootContext,a.refresh=!0,a.maskManager=new s(a),a.smoothProperty="imageSmoothingEnabled",!a.rootContext.imageSmoothingEnabled){var h=a.rootContext;h.webkitImageSmoothingEnabled?a.smoothProperty="webkitImageSmoothingEnabled":h.mozImageSmoothingEnabled?a.smoothProperty="mozImageSmoothingEnabled":h.oImageSmoothingEnabled?a.smoothProperty="oImageSmoothingEnabled":h.msImageSmoothingEnabled&&(a.smoothProperty="msImageSmoothingEnabled")}return a.initPlugins(o.__plugins),a.blendModes=(void 0===i&&(i=[]),l()?(i[n.BLEND_MODES.NORMAL]="source-over",i[n.BLEND_MODES.ADD]="lighter",i[n.BLEND_MODES.MULTIPLY]="multiply",i[n.BLEND_MODES.SCREEN]="screen",i[n.BLEND_MODES.OVERLAY]="overlay",i[n.BLEND_MODES.DARKEN]="darken",i[n.BLEND_MODES.LIGHTEN]="lighten",i[n.BLEND_MODES.COLOR_DODGE]="color-dodge",i[n.BLEND_MODES.COLOR_BURN]="color-burn",i[n.BLEND_MODES.HARD_LIGHT]="hard-light",i[n.BLEND_MODES.SOFT_LIGHT]="soft-light",i[n.BLEND_MODES.DIFFERENCE]="difference",i[n.BLEND_MODES.EXCLUSION]="exclusion",i[n.BLEND_MODES.HUE]="hue",i[n.BLEND_MODES.SATURATION]="saturate",i[n.BLEND_MODES.COLOR]="color",i[n.BLEND_MODES.LUMINOSITY]="luminosity"):(i[n.BLEND_MODES.NORMAL]="source-over",i[n.BLEND_MODES.ADD]="lighter",i[n.BLEND_MODES.MULTIPLY]="source-over",i[n.BLEND_MODES.SCREEN]="source-over",i[n.BLEND_MODES.OVERLAY]="source-over",i[n.BLEND_MODES.DARKEN]="source-over",i[n.BLEND_MODES.LIGHTEN]="source-over",i[n.BLEND_MODES.COLOR_DODGE]="source-over",i[n.BLEND_MODES.COLOR_BURN]="source-over",i[n.BLEND_MODES.HARD_LIGHT]="source-over",i[n.BLEND_MODES.SOFT_LIGHT]="source-over",i[n.BLEND_MODES.DIFFERENCE]="source-over",i[n.BLEND_MODES.EXCLUSION]="source-over",i[n.BLEND_MODES.HUE]="source-over",i[n.BLEND_MODES.SATURATION]="source-over",i[n.BLEND_MODES.COLOR]="source-over",i[n.BLEND_MODES.LUMINOSITY]="source-over"),i[n.BLEND_MODES.NORMAL_NPM]=i[n.BLEND_MODES.NORMAL],i[n.BLEND_MODES.ADD_NPM]=i[n.BLEND_MODES.ADD],i[n.BLEND_MODES.SCREEN_NPM]=i[n.BLEND_MODES.SCREEN],i[n.BLEND_MODES.SRC_IN]="source-in",i[n.BLEND_MODES.SRC_OUT]="source-out",i[n.BLEND_MODES.SRC_ATOP]="source-atop",i[n.BLEND_MODES.DST_OVER]="destination-over",i[n.BLEND_MODES.DST_IN]="destination-in",i[n.BLEND_MODES.DST_OUT]="destination-out",i[n.BLEND_MODES.DST_ATOP]="destination-atop",i[n.BLEND_MODES.XOR]="xor",i[n.BLEND_MODES.SUBTRACT]="source-over",i),a._activeBlendMode=null,a._outerBlend=!1,a._projTransform=null,a.renderingToScreen=!1,r.sayHello("Canvas"),a.resize(a.options.width,a.options.height),a}return function(e,t){function r(){this.constructor=e}a(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}(o,e),o.prototype.render=function(e,o,i,a,s){if(this.view){this.renderingToScreen=!o,this.emit("prerender");var h=this.resolution;o?((o=o.castToBaseTexture())._canvasRenderTarget||(o._canvasRenderTarget=new r.CanvasRenderTarget(o.width,o.height,o.resolution),o.resource=new t.resources.CanvasResource(o._canvasRenderTarget.canvas),o.valid=!0),this.context=o._canvasRenderTarget.context,this.resolution=o._canvasRenderTarget.resolution):this.context=this.rootContext;var l=this.context;if(this._projTransform=a||null,o||(this._lastObjectRendered=e),!s){var c=e.enableTempParent();e.updateTransform(),e.disableTempParent(c)}if(l.save(),l.setTransform(1,0,0,1,0,0),l.globalAlpha=1,this._activeBlendMode=n.BLEND_MODES.NORMAL,this._outerBlend=!1,l.globalCompositeOperation=this.blendModes[n.BLEND_MODES.NORMAL],void 0!==i?i:this.clearBeforeRender)if(this.renderingToScreen)this.transparent?l.clearRect(0,0,this.width,this.height):(l.fillStyle=this._backgroundColorString,l.fillRect(0,0,this.width,this.height));else{(o=o)._canvasRenderTarget.clear();var d=o.clearColor;d[3]>0&&(l.fillStyle=r.hex2string(r.rgb2hex(d)),l.fillRect(0,0,o.realWidth,o.realHeight))}var u=this.context;this.context=l,e.renderCanvas(this),this.context=u,l.restore(),this.resolution=h,this._projTransform=null,this.emit("postrender")}},o.prototype.setContextTransform=function(e,t,r){var o=e,n=this._projTransform,i=this.resolution;r=r||i,n&&((o=c).copyFrom(e),o.prepend(n)),t?this.context.setTransform(o.a*r,o.b*r,o.c*r,o.d*r,o.tx*i|0,o.ty*i|0):this.context.setTransform(o.a*r,o.b*r,o.c*r,o.d*r,o.tx*i,o.ty*i)},o.prototype.clear=function(e){var t=this.context;e=e||this._backgroundColorString,!this.transparent&&e?(t.fillStyle=e,t.fillRect(0,0,this.width,this.height)):t.clearRect(0,0,this.width,this.height)},o.prototype.setBlendMode=function(e,t){var r=e===n.BLEND_MODES.SRC_IN||e===n.BLEND_MODES.SRC_OUT||e===n.BLEND_MODES.DST_IN||e===n.BLEND_MODES.DST_ATOP;!t&&r&&(e=n.BLEND_MODES.NORMAL),this._activeBlendMode!==e&&(this._activeBlendMode=e,this._outerBlend=r,this.context.globalCompositeOperation=this.blendModes[e])},o.prototype.destroy=function(t){e.prototype.destroy.call(this,t),this.context=null,this.refresh=!0,this.maskManager.destroy(),this.maskManager=null,this.smoothProperty=null},o.prototype.resize=function(t,r){e.prototype.resize.call(this,t,r),this.smoothProperty&&(this.rootContext[this.smoothProperty]=i.settings.SCALE_MODE===n.SCALE_MODES.LINEAR)},o.prototype.invalidateBlendMode=function(){this._activeBlendMode=this.blendModes.indexOf(this.context.globalCompositeOperation)},o.registerPlugin=function(e,t){o.__plugins=o.__plugins||{},o.__plugins[e]=t},o}(t.AbstractRenderer),u={canvas:null,getTintedCanvas:function(e,t){var r=e.texture,o="#"+("00000"+(0|(t=u.roundColor(t))).toString(16)).substr(-6);r.tintCache=r.tintCache||{};var n,i=r.tintCache[o];if(i){if(i.tintId===r._updateID)return r.tintCache[o];n=r.tintCache[o]}else n=document.createElement("canvas");if(u.tintMethod(r,t,n),n.tintId=r._updateID,u.convertTintToImage){var a=new Image;a.src=n.toDataURL(),r.tintCache[o]=a}else r.tintCache[o]=n;return n},getTintedPattern:function(e,t){var r="#"+("00000"+(0|(t=u.roundColor(t))).toString(16)).substr(-6);e.patternCache=e.patternCache||{};var o=e.patternCache[r];return o&&o.tintId===e._updateID?o:(u.canvas||(u.canvas=document.createElement("canvas")),u.tintMethod(e,t,u.canvas),(o=u.canvas.getContext("2d").createPattern(u.canvas,"repeat")).tintId=e._updateID,e.patternCache[r]=o,o)},tintWithMultiply:function(e,t,r){var o=r.getContext("2d"),n=e._frame.clone(),i=e.baseTexture.resolution;n.x*=i,n.y*=i,n.width*=i,n.height*=i,r.width=Math.ceil(n.width),r.height=Math.ceil(n.height),o.save(),o.fillStyle="#"+("00000"+(0|t).toString(16)).substr(-6),o.fillRect(0,0,n.width,n.height),o.globalCompositeOperation="multiply";var a=e.baseTexture.getDrawableSource();o.drawImage(a,n.x,n.y,n.width,n.height,0,0,n.width,n.height),o.globalCompositeOperation="destination-atop",o.drawImage(a,n.x,n.y,n.width,n.height,0,0,n.width,n.height),o.restore()},tintWithOverlay:function(e,t,r){var o=r.getContext("2d"),n=e._frame.clone(),i=e.baseTexture.resolution;n.x*=i,n.y*=i,n.width*=i,n.height*=i,r.width=Math.ceil(n.width),r.height=Math.ceil(n.height),o.save(),o.globalCompositeOperation="copy",o.fillStyle="#"+("00000"+(0|t).toString(16)).substr(-6),o.fillRect(0,0,n.width,n.height),o.globalCompositeOperation="destination-atop",o.drawImage(e.baseTexture.getDrawableSource(),n.x,n.y,n.width,n.height,0,0,n.width,n.height),o.restore()},tintWithPerPixel:function(e,t,o){var n=o.getContext("2d"),i=e._frame.clone(),a=e.baseTexture.resolution;i.x*=a,i.y*=a,i.width*=a,i.height*=a,o.width=Math.ceil(i.width),o.height=Math.ceil(i.height),n.save(),n.globalCompositeOperation="copy",n.drawImage(e.baseTexture.getDrawableSource(),i.x,i.y,i.width,i.height,0,0,i.width,i.height),n.restore();for(var s=r.hex2rgb(t),h=s[0],l=s[1],c=s[2],d=n.getImageData(0,0,i.width,i.height),u=d.data,E=0;E<u.length;E+=4)u[E+0]*=h,u[E+1]*=l,u[E+2]*=c;n.putImageData(d,0,0)},roundColor:function(e){var t=u.cacheStepsPerColorChannel,o=r.hex2rgb(e);return o[0]=Math.min(255,o[0]/t*t),o[1]=Math.min(255,o[1]/t*t),o[2]=Math.min(255,o[2]/t*t),r.rgb2hex(o)},cacheStepsPerColorChannel:8,convertTintToImage:!1,canUseMultiply:l(),tintMethod:null};u.tintMethod=u.canUseMultiply?u.tintWithMultiply:u.tintWithPerPixel;var E=t.Renderer.create;return t.Renderer.create=function(e){if(!(e&&e.forceCanvas))try{return E(e)}catch(e){}return new d(e)},t.BaseTexture.prototype.getDrawableSource=function(){var e=this.resource;return e?e.bitmap||e.source:null},t.BaseRenderTexture.prototype._canvasRenderTarget=null,t.Texture.prototype.patternCache=null,t.Texture.prototype.tintCache=null,e.CanvasRenderer=d,e.canUseNewCanvasBlendModes=l,e.canvasUtils=u,e}({},PIXI,PIXI.utils,PIXI,PIXI,PIXI);Object.assign(this.PIXI,_pixi_canvas_renderer);
//# sourceMappingURL=canvas-renderer.min.js.map

849

lib/canvas-renderer.es.js
/*!
* @pixi/canvas-renderer - v5.2.4
* Compiled Sun, 03 May 2020 22:38:52 UTC
* @pixi/canvas-renderer - v5.3.0
* Compiled Thu, 18 Jun 2020 23:27:40 UTC
*

@@ -8,209 +8,193 @@ * @pixi/canvas-renderer is licensed under the MIT License.

*/
import { resources, AbstractRenderer, Renderer, BaseTexture } from '@pixi/core';
import { CanvasRenderTarget, sayHello, hex2rgb, rgb2hex } from '@pixi/utils';
import { resources, AbstractRenderer, Renderer, BaseTexture, BaseRenderTexture, Texture } from '@pixi/core';
import { sayHello, CanvasRenderTarget, hex2string, rgb2hex, hex2rgb } from '@pixi/utils';
import { SHAPES, Matrix } from '@pixi/math';
import { BLEND_MODES, SCALE_MODES, RENDERER_TYPE } from '@pixi/constants';
import { BLEND_MODES, RENDERER_TYPE, SCALE_MODES } from '@pixi/constants';
import { settings } from '@pixi/settings';
/**
* A set of functions used to handle masking.
*
* Sprite masking is not supported on the CanvasRenderer.
*
* @class
* @memberof PIXI
*/
var CanvasMaskManager = function CanvasMaskManager(renderer)
{
this.renderer = renderer;
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
this._foundShapes = [];
};
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
/**
* This method adds it to the current stack of masks.
*
* @param {PIXI.MaskData | PIXI.Graphics} maskData - the maskData that will be pushed
*/
CanvasMaskManager.prototype.pushMask = function pushMask (maskData)
{
var renderer = this.renderer;
var maskObject = maskData.isMaskData ? maskData.maskObject : maskData;
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
renderer.context.save();
// TODO support sprite alpha masks??
// lots of effort required. If demand is great enough..
var foundShapes = this._foundShapes;
this.recursiveFindShapes(maskObject, foundShapes);
if (foundShapes.length > 0)
{
var context = renderer.context;
context.beginPath();
for (var i = 0; i < foundShapes.length; i++)
{
var shape = foundShapes[i];
var transform = shape.transform.worldTransform;
this.renderer.setContextTransform(transform);
this.renderGraphicsShape(shape);
}
foundShapes.length = 0;
context.clip();
}
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) { if (b.hasOwnProperty(p)) { d[p] = b[p]; } } };
return extendStatics(d, b);
};
/**
* Renders all PIXI.Graphics shapes in a subtree.
*
* @param {PIXI.Container} container - container to scan.
* @param {PIXI.Graphics[]} out - where to put found shapes
*/
CanvasMaskManager.prototype.recursiveFindShapes = function recursiveFindShapes (container, out)
{
if (container.geometry && container.geometry.graphicsData)
{
out.push(container);
}
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var children = container.children;
if (children)
{
for (var i = 0; i < children.length; i++)
{
this.recursiveFindShapes(children[i], out);
}
}
};
/**
* Renders a PIXI.Graphics shape.
* A set of functions used to handle masking.
*
* @param {PIXI.Graphics} graphics - The object to render.
* Sprite masking is not supported on the CanvasRenderer.
*
* @class
* @memberof PIXI
*/
CanvasMaskManager.prototype.renderGraphicsShape = function renderGraphicsShape (graphics)
{
graphics.finishPoly();
var context = this.renderer.context;
var graphicsData = graphics.geometry.graphicsData;
var len = graphicsData.length;
if (len === 0)
{
return;
var CanvasMaskManager = /** @class */ (function () {
/**
* @param {PIXI.CanvasRenderer} renderer - The canvas renderer.
*/
function CanvasMaskManager(renderer) {
this.renderer = renderer;
this._foundShapes = [];
}
for (var i = 0; i < len; i++)
{
var data = graphicsData[i];
var shape = data.shape;
if (data.type === SHAPES.POLY)
{
var points = shape.points;
context.moveTo(points[0], points[1]);
for (var j = 1; j < points.length / 2; j++)
{
context.lineTo(points[j * 2], points[(j * 2) + 1]);
/**
* This method adds it to the current stack of masks.
*
* @param {PIXI.MaskData | PIXI.Graphics} maskData - the maskData that will be pushed
*/
CanvasMaskManager.prototype.pushMask = function (maskData) {
var renderer = this.renderer;
var maskObject = (maskData.maskObject || maskData);
renderer.context.save();
// TODO support sprite alpha masks??
// lots of effort required. If demand is great enough..
var foundShapes = this._foundShapes;
this.recursiveFindShapes(maskObject, foundShapes);
if (foundShapes.length > 0) {
var context = renderer.context;
context.beginPath();
for (var i = 0; i < foundShapes.length; i++) {
var shape = foundShapes[i];
var transform = shape.transform.worldTransform;
this.renderer.setContextTransform(transform);
this.renderGraphicsShape(shape);
}
// if the first and last point are the same close the path - much neater :)
if (points[0] === points[points.length - 2] && points[1] === points[points.length - 1])
{
context.closePath();
}
foundShapes.length = 0;
context.clip();
}
else if (data.type === SHAPES.RECT)
{
context.rect(shape.x, shape.y, shape.width, shape.height);
context.closePath();
};
/**
* Renders all PIXI.Graphics shapes in a subtree.
*
* @param {PIXI.Container} container - container to scan.
* @param {PIXI.Graphics[]} out - where to put found shapes
*/
CanvasMaskManager.prototype.recursiveFindShapes = function (container, out) {
if (container.geometry && container.geometry.graphicsData) {
out.push(container);
}
else if (data.type === SHAPES.CIRC)
{
// TODO - need to be Undefined!
context.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
context.closePath();
var children = container.children;
if (children) {
for (var i = 0; i < children.length; i++) {
this.recursiveFindShapes(children[i], out);
}
}
else if (data.type === SHAPES.ELIP)
{
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
var w = shape.width * 2;
var h = shape.height * 2;
var x = shape.x - (w / 2);
var y = shape.y - (h / 2);
var kappa = 0.5522848;
var ox = (w / 2) * kappa; // control point offset horizontal
var oy = (h / 2) * kappa; // control point offset vertical
var xe = x + w; // x-end
var ye = y + h; // y-end
var xm = x + (w / 2); // x-middle
var ym = y + (h / 2); // y-middle
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();
};
/**
* Renders a PIXI.Graphics shape.
*
* @param {PIXI.Graphics} graphics - The object to render.
*/
CanvasMaskManager.prototype.renderGraphicsShape = function (graphics) {
graphics.finishPoly();
var context = this.renderer.context;
var graphicsData = graphics.geometry.graphicsData;
var len = graphicsData.length;
if (len === 0) {
return;
}
else if (data.type === SHAPES.RREC)
{
var rx = shape.x;
var ry = shape.y;
var width = shape.width;
var height = shape.height;
var radius = shape.radius;
var maxRadius = Math.min(width, height) / 2 | 0;
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();
for (var i = 0; i < len; i++) {
var data = graphicsData[i];
var shape = data.shape;
if (shape.type === SHAPES.POLY) {
var points = shape.points;
context.moveTo(points[0], points[1]);
for (var j = 1; j < points.length / 2; j++) {
context.lineTo(points[j * 2], points[(j * 2) + 1]);
}
// if the first and last point are the same close the path - much neater :)
if (points[0] === points[points.length - 2] && points[1] === points[points.length - 1]) {
context.closePath();
}
}
else if (shape.type === SHAPES.RECT) {
context.rect(shape.x, shape.y, shape.width, shape.height);
context.closePath();
}
else if (shape.type === SHAPES.CIRC) {
// TODO - need to be Undefined!
context.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
context.closePath();
}
else if (shape.type === SHAPES.ELIP) {
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
var w = shape.width * 2;
var h = shape.height * 2;
var x = shape.x - (w / 2);
var y = shape.y - (h / 2);
var kappa = 0.5522848;
var ox = (w / 2) * kappa; // control point offset horizontal
var oy = (h / 2) * kappa; // control point offset vertical
var xe = x + w; // x-end
var ye = y + h; // y-end
var xm = x + (w / 2); // x-middle
var ym = y + (h / 2); // y-middle
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 === SHAPES.RREC) {
var rx = shape.x;
var ry = shape.y;
var width = shape.width;
var height = shape.height;
var radius = shape.radius;
var maxRadius = Math.min(width, height) / 2 | 0;
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 {PIXI.CanvasRenderer} renderer - The renderer context to use.
*/
CanvasMaskManager.prototype.popMask = function (renderer) {
renderer.context.restore();
renderer.invalidateBlendMode();
};
/**
* Destroys this canvas mask manager.
*
*/
CanvasMaskManager.prototype.destroy = function () {
/* empty */
};
return CanvasMaskManager;
}());
/**
* Restores the current drawing context to the state it was before the mask was applied.
*
* @param {PIXI.CanvasRenderer} renderer - The renderer context to use.
*/
CanvasMaskManager.prototype.popMask = function popMask (renderer)
{
renderer.context.restore();
renderer.invalidateBlendMode();
};
/**
* Destroys this canvas mask manager.
*
*/
CanvasMaskManager.prototype.destroy = function destroy ()
{
/* empty */
};
/**
* Creates a little colored canvas

@@ -222,17 +206,11 @@ *

*/
function createColoredCanvas(color)
{
function createColoredCanvas(color) {
var canvas = document.createElement('canvas');
canvas.width = 6;
canvas.height = 1;
var context = canvas.getContext('2d');
context.fillStyle = color;
context.fillRect(0, 0, 6, 1);
return canvas;
}
/**

@@ -244,32 +222,20 @@ * Checks whether the Canvas BlendModes are supported by the current browser

*/
function canUseNewCanvasBlendModes()
{
if (typeof document === 'undefined')
{
function canUseNewCanvasBlendModes() {
if (typeof document === 'undefined') {
return false;
}
var magenta = createColoredCanvas('#ff00ff');
var yellow = createColoredCanvas('#ffff00');
var canvas = document.createElement('canvas');
canvas.width = 6;
canvas.height = 1;
var context = canvas.getContext('2d');
context.globalCompositeOperation = 'multiply';
context.drawImage(magenta, 0, 0);
context.drawImage(yellow, 2, 0);
var imageData = context.getImageData(2, 0, 1, 1);
if (!imageData)
{
if (!imageData) {
return false;
}
var data = imageData.data;
return (data[0] === 255 && data[1] === 0 && data[2] === 0);

@@ -287,8 +253,5 @@ }

*/
function mapCanvasBlendModesToPixi(array)
{
if ( array === void 0 ) array = [];
if (canUseNewCanvasBlendModes())
{
function mapCanvasBlendModesToPixi(array) {
if (array === void 0) { array = []; }
if (canUseNewCanvasBlendModes()) {
array[BLEND_MODES.NORMAL] = 'source-over';

@@ -312,4 +275,3 @@ array[BLEND_MODES.ADD] = 'lighter'; // IS THIS OK???

}
else
{
else {
// this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough'

@@ -338,3 +300,2 @@ array[BLEND_MODES.NORMAL] = 'source-over';

array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN];
// composite operations

@@ -349,6 +310,4 @@ array[BLEND_MODES.SRC_IN] = 'source-in';

array[BLEND_MODES.XOR] = 'xor';
// SUBTRACT from flash, does not exist in canvas
array[BLEND_MODES.SUBTRACT] = 'source-over';
return array;

@@ -358,3 +317,2 @@ }

var tempMatrix = new Matrix();
/**

@@ -370,9 +328,24 @@ * The CanvasRenderer draws the scene and all its content onto a 2d canvas.

*/
var CanvasRenderer = /*@__PURE__*/(function (AbstractRenderer) {
function CanvasRenderer(options, arg2, arg3)
{
AbstractRenderer.call(this, 'Canvas', options, arg2, arg3);
this.type = RENDERER_TYPE.CANVAS;
var CanvasRenderer = /** @class */ (function (_super) {
__extends(CanvasRenderer, _super);
/**
* @param {object} [options] - The optional renderer parameters
* @param {number} [options.width=800] - the width of the screen
* @param {number} [options.height=600] - the height of the screen
* @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional
* @param {boolean} [options.transparent=false] - If the render view is transparent, default false
* @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for
* resolutions other than 1
* @param {boolean} [options.antialias=false] - sets antialias
* @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The
* resolution of the renderer retina would be 2.
* @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation,
* enable this if you need to call toDataUrl on the webgl context.
* @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or
* not before the new render pass.
* @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area
* (shown if not transparent).
*/
function CanvasRenderer(options) {
var _this = _super.call(this, RENDERER_TYPE.CANVAS, options) || this;
/**

@@ -383,4 +356,3 @@ * The root canvas 2d context that everything is drawn with.

*/
this.rootContext = this.view.getContext('2d', { alpha: this.transparent });
_this.rootContext = _this.view.getContext('2d', { alpha: _this.transparent });
/**

@@ -391,4 +363,3 @@ * The currently active canvas 2d context (could change with renderTextures)

*/
this.context = this.rootContext;
_this.context = _this.rootContext;
/**

@@ -399,4 +370,3 @@ * Boolean flag controlling canvas refresh.

*/
this.refresh = true;
_this.refresh = true;
/**

@@ -407,4 +377,3 @@ * Instance of a CanvasMaskManager, handles masking when using the canvas renderer.

*/
this.maskManager = new CanvasMaskManager(this);
_this.maskManager = new CanvasMaskManager(_this);
/**

@@ -415,26 +384,19 @@ * The canvas property used to set the canvas smoothing property.

*/
this.smoothProperty = 'imageSmoothingEnabled';
if (!this.rootContext.imageSmoothingEnabled)
{
if (this.rootContext.webkitImageSmoothingEnabled)
{
this.smoothProperty = 'webkitImageSmoothingEnabled';
_this.smoothProperty = 'imageSmoothingEnabled';
if (!_this.rootContext.imageSmoothingEnabled) {
var rc = _this.rootContext;
if (rc.webkitImageSmoothingEnabled) {
_this.smoothProperty = 'webkitImageSmoothingEnabled';
}
else if (this.rootContext.mozImageSmoothingEnabled)
{
this.smoothProperty = 'mozImageSmoothingEnabled';
else if (rc.mozImageSmoothingEnabled) {
_this.smoothProperty = 'mozImageSmoothingEnabled';
}
else if (this.rootContext.oImageSmoothingEnabled)
{
this.smoothProperty = 'oImageSmoothingEnabled';
else if (rc.oImageSmoothingEnabled) {
_this.smoothProperty = 'oImageSmoothingEnabled';
}
else if (this.rootContext.msImageSmoothingEnabled)
{
this.smoothProperty = 'msImageSmoothingEnabled';
else if (rc.msImageSmoothingEnabled) {
_this.smoothProperty = 'msImageSmoothingEnabled';
}
}
this.initPlugins(CanvasRenderer.__plugins);
_this.initPlugins(CanvasRenderer.__plugins);
/**

@@ -445,6 +407,5 @@ * Tracks the blend modes useful for this renderer.

*/
this.blendModes = mapCanvasBlendModesToPixi();
this._activeBlendMode = null;
this._outerBlend = false;
_this.blendModes = mapCanvasBlendModesToPixi();
_this._activeBlendMode = null;
_this._outerBlend = false;
/**

@@ -455,8 +416,5 @@ * Projection transform, passed in render() stored here

*/
this._projTransform = null;
this.renderingToScreen = false;
_this._projTransform = null;
_this.renderingToScreen = false;
sayHello('Canvas');
/**

@@ -467,3 +425,2 @@ * Fired after rendering finishes.

*/
/**

@@ -474,10 +431,5 @@ * Fired before rendering starts.

*/
this.resize(this.options.width, this.options.height);
_this.resize(_this.options.width, _this.options.height);
return _this;
}
if ( AbstractRenderer ) CanvasRenderer.__proto__ = AbstractRenderer;
CanvasRenderer.prototype = Object.create( AbstractRenderer && AbstractRenderer.prototype );
CanvasRenderer.prototype.constructor = CanvasRenderer;
/**

@@ -489,63 +441,38 @@ * Renders the object to this canvas view

* If unset, it will render to the root context.
* @param {boolean} [clear=false] - Whether to clear the canvas before drawing
* @param {boolean} [clear=this.clearBeforeRender] - Whether to clear the canvas before drawing
* @param {PIXI.Matrix} [transform] - A transformation to be applied
* @param {boolean} [skipUpdateTransform=false] - Whether to skip the update transform
*/
CanvasRenderer.prototype.render = function render (displayObject, renderTexture, clear, transform, skipUpdateTransform)
{
if (!this.view)
{
CanvasRenderer.prototype.render = function (displayObject, renderTexture, clear, transform, skipUpdateTransform) {
if (!this.view) {
return;
}
// can be handy to know!
this.renderingToScreen = !renderTexture;
this.emit('prerender');
var rootResolution = this.resolution;
if (renderTexture)
{
renderTexture = renderTexture.baseTexture || renderTexture;
if (!renderTexture._canvasRenderTarget)
{
renderTexture._canvasRenderTarget = new CanvasRenderTarget(
renderTexture.width,
renderTexture.height,
renderTexture.resolution
);
if (renderTexture) {
renderTexture = renderTexture.castToBaseTexture();
if (!renderTexture._canvasRenderTarget) {
renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution);
renderTexture.resource = new resources.CanvasResource(renderTexture._canvasRenderTarget.canvas);
renderTexture.valid = true;
}
this.context = renderTexture._canvasRenderTarget.context;
this.resolution = renderTexture._canvasRenderTarget.resolution;
}
else
{
else {
this.context = this.rootContext;
}
var context = this.context;
this._projTransform = transform || null;
if (!renderTexture)
{
if (!renderTexture) {
this._lastObjectRendered = displayObject;
}
if (!skipUpdateTransform)
{
if (!skipUpdateTransform) {
// update the scene graph
var cacheParent = displayObject.parent;
displayObject.parent = this._tempDisplayObjectParent;
var cacheParent = displayObject.enableTempParent();
displayObject.updateTransform();
displayObject.parent = cacheParent;
// displayObject.hitArea = //TODO add a temp hit area
displayObject.disableTempParent(cacheParent);
}
context.save();

@@ -557,36 +484,32 @@ context.setTransform(1, 0, 0, 1, 0, 0);

context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL];
if (clear !== undefined ? clear : this.clearBeforeRender)
{
if (this.renderingToScreen)
{
if (this.transparent)
{
if (clear !== undefined ? clear : this.clearBeforeRender) {
if (this.renderingToScreen) {
if (this.transparent) {
context.clearRect(0, 0, this.width, this.height);
}
else
{
else {
context.fillStyle = this._backgroundColorString;
context.fillRect(0, 0, this.width, this.height);
}
} // else {
// TODO: implement background for CanvasRenderTarget or RenderTexture?
// }
}
else {
renderTexture = renderTexture;
renderTexture._canvasRenderTarget.clear();
var clearColor = renderTexture.clearColor;
if (clearColor[3] > 0) {
context.fillStyle = hex2string(rgb2hex(clearColor));
context.fillRect(0, 0, renderTexture.realWidth, renderTexture.realHeight);
}
}
}
// TODO RENDER TARGET STUFF HERE..
var tempContext = this.context;
this.context = context;
displayObject.renderCanvas(this);
this.context = tempContext;
context.restore();
this.resolution = rootResolution;
this._projTransform = null;
this.emit('postrender');
};
/**

@@ -596,16 +519,12 @@ * sets matrix of context

* takes care about resolution
* @param {PIXI.Matrix} transform world matrix of current element
* @param {boolean} [roundPixels] whether to round (tx,ty) coords
* @param {number} [localResolution] If specified, used instead of `renderer.resolution` for local scaling
* @param {PIXI.Matrix} transform - world matrix of current element
* @param {boolean} [roundPixels] - whether to round (tx,ty) coords
* @param {number} [localResolution] - If specified, used instead of `renderer.resolution` for local scaling
*/
CanvasRenderer.prototype.setContextTransform = function setContextTransform (transform, roundPixels, localResolution)
{
CanvasRenderer.prototype.setContextTransform = function (transform, roundPixels, localResolution) {
var mat = transform;
var proj = this._projTransform;
var resolution = this.resolution;
localResolution = localResolution || resolution;
if (proj)
{
if (proj) {
mat = tempMatrix;

@@ -615,27 +534,9 @@ mat.copyFrom(transform);

}
if (roundPixels)
{
this.context.setTransform(
mat.a * localResolution,
mat.b * localResolution,
mat.c * localResolution,
mat.d * localResolution,
(mat.tx * resolution) | 0,
(mat.ty * resolution) | 0
);
if (roundPixels) {
this.context.setTransform(mat.a * localResolution, mat.b * localResolution, mat.c * localResolution, mat.d * localResolution, (mat.tx * resolution) | 0, (mat.ty * resolution) | 0);
}
else
{
this.context.setTransform(
mat.a * localResolution,
mat.b * localResolution,
mat.c * localResolution,
mat.d * localResolution,
mat.tx * resolution,
mat.ty * resolution
);
else {
this.context.setTransform(mat.a * localResolution, mat.b * localResolution, mat.c * localResolution, mat.d * localResolution, mat.tx * resolution, mat.ty * resolution);
}
};
/**

@@ -646,19 +547,13 @@ * Clear the canvas of renderer.

*/
CanvasRenderer.prototype.clear = function clear (clearColor)
{
CanvasRenderer.prototype.clear = function (clearColor) {
var context = this.context;
clearColor = clearColor || this._backgroundColorString;
if (!this.transparent && clearColor)
{
if (!this.transparent && clearColor) {
context.fillStyle = clearColor;
context.fillRect(0, 0, this.width, this.height);
}
else
{
else {
context.clearRect(0, 0, this.width, this.height);
}
};
/**

@@ -671,4 +566,3 @@ * Sets the blend mode of the renderer.

*/
CanvasRenderer.prototype.setBlendMode = function setBlendMode (blendMode, readyForOuterBlend)
{
CanvasRenderer.prototype.setBlendMode = function (blendMode, readyForOuterBlend) {
var outerBlend = blendMode === BLEND_MODES.SRC_IN

@@ -678,13 +572,8 @@ || blendMode === BLEND_MODES.SRC_OUT

|| blendMode === BLEND_MODES.DST_ATOP;
if (!readyForOuterBlend && outerBlend)
{
if (!readyForOuterBlend && outerBlend) {
blendMode = BLEND_MODES.NORMAL;
}
if (this._activeBlendMode === blendMode)
{
if (this._activeBlendMode === blendMode) {
return;
}
this._activeBlendMode = blendMode;

@@ -694,3 +583,2 @@ this._outerBlend = outerBlend;

};
/**

@@ -701,17 +589,11 @@ * Removes everything from the renderer and optionally removes the Canvas DOM element.

*/
CanvasRenderer.prototype.destroy = function destroy (removeView)
{
CanvasRenderer.prototype.destroy = function (removeView) {
// call the base destroy
AbstractRenderer.prototype.destroy.call(this, removeView);
_super.prototype.destroy.call(this, removeView);
this.context = null;
this.refresh = true;
this.maskManager.destroy();
this.maskManager = null;
this.smoothProperty = null;
};
/**

@@ -725,22 +607,16 @@ * Resizes the canvas view to the specified width and height.

*/
CanvasRenderer.prototype.resize = function resize (screenWidth, screenHeight)
{
AbstractRenderer.prototype.resize.call(this, screenWidth, screenHeight);
CanvasRenderer.prototype.resize = function (screenWidth, screenHeight) {
_super.prototype.resize.call(this, screenWidth, screenHeight);
// reset the scale mode.. oddly this seems to be reset when the canvas is resized.
// surely a browser bug?? Let PixiJS fix that for you..
if (this.smoothProperty)
{
if (this.smoothProperty) {
this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR);
}
};
/**
* Checks if blend mode has changed.
*/
CanvasRenderer.prototype.invalidateBlendMode = function invalidateBlendMode ()
{
CanvasRenderer.prototype.invalidateBlendMode = function () {
this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation);
};
/**

@@ -753,8 +629,7 @@ * Collection of installed plugins. These are included by default in PIXI, but can be excluded

* @readonly
* @property {PIXI.accessibility.AccessibilityManager} accessibility Support tabbing interactive elements.
* @property {PIXI.AccessibilityManager} accessibility Support tabbing interactive elements.
* @property {PIXI.CanvasExtract} extract Extract image data from renderer.
* @property {PIXI.interaction.InteractionManager} interaction Handles mouse, touch and pointer events.
* @property {PIXI.InteractionManager} interaction Handles mouse, touch and pointer events.
* @property {PIXI.CanvasPrepare} prepare Pre-render display objects.
*/
/**

@@ -767,8 +642,6 @@ * Adds a plugin to the renderer.

*/
CanvasRenderer.registerPlugin = function registerPlugin (pluginName, ctor)
{
CanvasRenderer.registerPlugin = function (pluginName, ctor) {
CanvasRenderer.__plugins = CanvasRenderer.__plugins || {};
CanvasRenderer.__plugins[pluginName] = ctor;
};
return CanvasRenderer;

@@ -787,2 +660,3 @@ }(AbstractRenderer));

var canvasUtils = {
canvas: null,
/**

@@ -798,48 +672,29 @@ * Basically this method just needs a sprite and a color and tints the sprite with the given color.

var texture = sprite.texture;
color = canvasUtils.roundColor(color);
var stringColor = "#" + ((("00000" + ((color | 0).toString(16)))).substr(-6));
var stringColor = "#" + ("00000" + (color | 0).toString(16)).substr(-6);
texture.tintCache = texture.tintCache || {};
var cachedCanvas = texture.tintCache[stringColor];
var canvas;
if (cachedCanvas)
{
if (cachedCanvas.tintId === texture._updateID)
{
if (cachedCanvas) {
if (cachedCanvas.tintId === texture._updateID) {
return texture.tintCache[stringColor];
}
canvas = texture.tintCache[stringColor];
}
else
{
else {
canvas = document.createElement('canvas');
}
canvasUtils.tintMethod(texture, color, canvas);
canvas.tintId = texture._updateID;
if (canvasUtils.convertTintToImage)
{
if (canvasUtils.convertTintToImage) {
// is this better?
var tintImage = new Image();
tintImage.src = canvas.toDataURL();
texture.tintCache[stringColor] = tintImage;
}
else
{
else {
texture.tintCache[stringColor] = canvas;
}
return canvas;
},
/**

@@ -849,3 +704,3 @@ * 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 {PIXI.Texture} texture - the sprite to tint
* @param {number} color - the color to use to tint the sprite with

@@ -856,15 +711,9 @@ * @return {HTMLCanvasElement} The tinted canvas

color = canvasUtils.roundColor(color);
var stringColor = "#" + ((("00000" + ((color | 0).toString(16)))).substr(-6));
var stringColor = "#" + ("00000" + (color | 0).toString(16)).substr(-6);
texture.patternCache = texture.patternCache || {};
var pattern = texture.patternCache[stringColor];
if (pattern && pattern.tintId === texture._updateID)
{
if (pattern && pattern.tintId === texture._updateID) {
return pattern;
}
if (!canvasUtils.canvas)
{
if (!canvasUtils.canvas) {
canvasUtils.canvas = document.createElement('canvas');

@@ -876,6 +725,4 @@ }

texture.patternCache[stringColor] = pattern;
return pattern;
},
/**

@@ -893,3 +740,2 @@ * Tint a texture using the 'multiply' operation.

var resolution = texture.baseTexture.resolution;
crop.x *= resolution;

@@ -899,43 +745,14 @@ crop.y *= 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)))).substr(-6));
context.fillStyle = "#" + ("00000" + (color | 0).toString(16)).substr(-6);
context.fillRect(0, 0, crop.width, crop.height);
context.globalCompositeOperation = 'multiply';
var source = texture.baseTexture.getDrawableSource();
context.drawImage(
source,
crop.x,
crop.y,
crop.width,
crop.height,
0,
0,
crop.width,
crop.height
);
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.drawImage(source, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
context.restore();
},
/**

@@ -949,8 +766,6 @@ * Tint a texture using the 'overlay' operation.

*/
tintWithOverlay: function tintWithOverlay(texture, color, canvas)
{
tintWithOverlay: function (texture, color, canvas) {
var context = canvas.getContext('2d');
var crop = texture._frame.clone();
var resolution = texture.baseTexture.resolution;
crop.x *= resolution;

@@ -960,28 +775,13 @@ crop.y *= 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)))).substr(-6));
context.fillStyle = "#" + ("00000" + (color | 0).toString(16)).substr(-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.drawImage(texture.baseTexture.getDrawableSource(), crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
// context.globalCompositeOperation = 'copy';
context.restore();
},
/**

@@ -999,3 +799,2 @@ * Tint a texture pixel per pixel.

var resolution = texture.baseTexture.resolution;
crop.x *= resolution;

@@ -1005,21 +804,8 @@ crop.y *= 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.drawImage(texture.baseTexture.getDrawableSource(), crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
context.restore();
var rgbValues = hex2rgb(color);

@@ -1029,9 +815,5 @@ var r = rgbValues[0];

var b = rgbValues[2];
var pixelData = context.getImageData(0, 0, crop.width, crop.height);
var pixels = pixelData.data;
for (var i = 0; i < pixels.length; i += 4)
{
for (var i = 0; i < pixels.length; i += 4) {
pixels[i + 0] *= r;

@@ -1041,6 +823,4 @@ pixels[i + 1] *= g;

}
context.putImageData(pixelData, 0, 0);
},
/**

@@ -1055,12 +835,8 @@ * Rounds the specified color according to the canvasUtils.cacheStepsPerColorChannel.

var step = canvasUtils.cacheStepsPerColorChannel;
var rgbValues = hex2rgb(color);
rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step);
rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step);
rgbValues[2] = Math.min(255, (rgbValues[2] / step) * step);
return rgb2hex(rgbValues);
},
/**

@@ -1073,3 +849,2 @@ * Number of steps which will be used as a cap when rounding colors.

cacheStepsPerColorChannel: 8,
/**

@@ -1082,3 +857,2 @@ * Tint cache boolean flag.

convertTintToImage: false,
/**

@@ -1091,3 +865,2 @@ * Whether or not the Canvas BlendModes are supported, consequently the ability to tint using the multiply method.

canUseMultiply: canUseNewCanvasBlendModes(),
/**

@@ -1099,7 +872,4 @@ * The tinting method that will be used.

*/
tintMethod: function () { // jslint-disable no-empty-function
},
tintMethod: null,
};
canvasUtils.tintMethod = canvasUtils.canUseMultiply ? canvasUtils.tintWithMultiply : canvasUtils.tintWithPerPixel;

@@ -1109,3 +879,2 @@

var parentCreate = Renderer.create;
/**

@@ -1116,18 +885,12 @@ * Override the Renderer.create to fallback to use CanvasRenderer.

*/
Renderer.create = function create(options)
{
Renderer.create = function create(options) {
var forceCanvas = options && options.forceCanvas;
if (!forceCanvas)
{
try
{
if (!forceCanvas) {
try {
return parentCreate(options);
}
catch (err)
{
catch (err) {
// swallow WebGL-unsupported error
}
}
return new CanvasRenderer(options);

@@ -1143,10 +906,18 @@ };

*/
BaseTexture.prototype.getDrawableSource = function getDrawableSource()
{
BaseTexture.prototype.getDrawableSource = function getDrawableSource() {
var resource = this.resource;
return resource ? (resource.bitmap || resource.source) : null;
};
/**
* A reference to the canvas render target (we only need one as this can be shared across renderers)
*
* @protected
* @member {PIXI.utils.CanvasRenderTarget} _canvasRenderTarget
* @memberof PIXI.BaseRenderTexture#
*/
BaseRenderTexture.prototype._canvasRenderTarget = null;
Texture.prototype.patternCache = null;
Texture.prototype.tintCache = null;
export { CanvasRenderer, canUseNewCanvasBlendModes, canvasUtils };
//# sourceMappingURL=canvas-renderer.es.js.map

843

lib/canvas-renderer.js
/*!
* @pixi/canvas-renderer - v5.2.4
* Compiled Sun, 03 May 2020 22:38:52 UTC
* @pixi/canvas-renderer - v5.3.0
* Compiled Thu, 18 Jun 2020 23:27:40 UTC
*

@@ -18,203 +18,187 @@ * @pixi/canvas-renderer is licensed under the MIT License.

/**
* A set of functions used to handle masking.
*
* Sprite masking is not supported on the CanvasRenderer.
*
* @class
* @memberof PIXI
*/
var CanvasMaskManager = function CanvasMaskManager(renderer)
{
this.renderer = renderer;
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
this._foundShapes = [];
};
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
/**
* This method adds it to the current stack of masks.
*
* @param {PIXI.MaskData | PIXI.Graphics} maskData - the maskData that will be pushed
*/
CanvasMaskManager.prototype.pushMask = function pushMask (maskData)
{
var renderer = this.renderer;
var maskObject = maskData.isMaskData ? maskData.maskObject : maskData;
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
renderer.context.save();
// TODO support sprite alpha masks??
// lots of effort required. If demand is great enough..
var foundShapes = this._foundShapes;
this.recursiveFindShapes(maskObject, foundShapes);
if (foundShapes.length > 0)
{
var context = renderer.context;
context.beginPath();
for (var i = 0; i < foundShapes.length; i++)
{
var shape = foundShapes[i];
var transform = shape.transform.worldTransform;
this.renderer.setContextTransform(transform);
this.renderGraphicsShape(shape);
}
foundShapes.length = 0;
context.clip();
}
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) { if (b.hasOwnProperty(p)) { d[p] = b[p]; } } };
return extendStatics(d, b);
};
/**
* Renders all PIXI.Graphics shapes in a subtree.
*
* @param {PIXI.Container} container - container to scan.
* @param {PIXI.Graphics[]} out - where to put found shapes
*/
CanvasMaskManager.prototype.recursiveFindShapes = function recursiveFindShapes (container, out)
{
if (container.geometry && container.geometry.graphicsData)
{
out.push(container);
}
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var children = container.children;
if (children)
{
for (var i = 0; i < children.length; i++)
{
this.recursiveFindShapes(children[i], out);
}
}
};
/**
* Renders a PIXI.Graphics shape.
* A set of functions used to handle masking.
*
* @param {PIXI.Graphics} graphics - The object to render.
* Sprite masking is not supported on the CanvasRenderer.
*
* @class
* @memberof PIXI
*/
CanvasMaskManager.prototype.renderGraphicsShape = function renderGraphicsShape (graphics)
{
graphics.finishPoly();
var context = this.renderer.context;
var graphicsData = graphics.geometry.graphicsData;
var len = graphicsData.length;
if (len === 0)
{
return;
var CanvasMaskManager = /** @class */ (function () {
/**
* @param {PIXI.CanvasRenderer} renderer - The canvas renderer.
*/
function CanvasMaskManager(renderer) {
this.renderer = renderer;
this._foundShapes = [];
}
for (var i = 0; i < len; i++)
{
var data = graphicsData[i];
var shape = data.shape;
if (data.type === math.SHAPES.POLY)
{
var points = shape.points;
context.moveTo(points[0], points[1]);
for (var j = 1; j < points.length / 2; j++)
{
context.lineTo(points[j * 2], points[(j * 2) + 1]);
/**
* This method adds it to the current stack of masks.
*
* @param {PIXI.MaskData | PIXI.Graphics} maskData - the maskData that will be pushed
*/
CanvasMaskManager.prototype.pushMask = function (maskData) {
var renderer = this.renderer;
var maskObject = (maskData.maskObject || maskData);
renderer.context.save();
// TODO support sprite alpha masks??
// lots of effort required. If demand is great enough..
var foundShapes = this._foundShapes;
this.recursiveFindShapes(maskObject, foundShapes);
if (foundShapes.length > 0) {
var context = renderer.context;
context.beginPath();
for (var i = 0; i < foundShapes.length; i++) {
var shape = foundShapes[i];
var transform = shape.transform.worldTransform;
this.renderer.setContextTransform(transform);
this.renderGraphicsShape(shape);
}
// if the first and last point are the same close the path - much neater :)
if (points[0] === points[points.length - 2] && points[1] === points[points.length - 1])
{
context.closePath();
}
foundShapes.length = 0;
context.clip();
}
else if (data.type === math.SHAPES.RECT)
{
context.rect(shape.x, shape.y, shape.width, shape.height);
context.closePath();
};
/**
* Renders all PIXI.Graphics shapes in a subtree.
*
* @param {PIXI.Container} container - container to scan.
* @param {PIXI.Graphics[]} out - where to put found shapes
*/
CanvasMaskManager.prototype.recursiveFindShapes = function (container, out) {
if (container.geometry && container.geometry.graphicsData) {
out.push(container);
}
else if (data.type === math.SHAPES.CIRC)
{
// TODO - need to be Undefined!
context.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
context.closePath();
var children = container.children;
if (children) {
for (var i = 0; i < children.length; i++) {
this.recursiveFindShapes(children[i], out);
}
}
else if (data.type === math.SHAPES.ELIP)
{
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
var w = shape.width * 2;
var h = shape.height * 2;
var x = shape.x - (w / 2);
var y = shape.y - (h / 2);
var kappa = 0.5522848;
var ox = (w / 2) * kappa; // control point offset horizontal
var oy = (h / 2) * kappa; // control point offset vertical
var xe = x + w; // x-end
var ye = y + h; // y-end
var xm = x + (w / 2); // x-middle
var ym = y + (h / 2); // y-middle
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();
};
/**
* Renders a PIXI.Graphics shape.
*
* @param {PIXI.Graphics} graphics - The object to render.
*/
CanvasMaskManager.prototype.renderGraphicsShape = function (graphics) {
graphics.finishPoly();
var context = this.renderer.context;
var graphicsData = graphics.geometry.graphicsData;
var len = graphicsData.length;
if (len === 0) {
return;
}
else if (data.type === math.SHAPES.RREC)
{
var rx = shape.x;
var ry = shape.y;
var width = shape.width;
var height = shape.height;
var radius = shape.radius;
var maxRadius = Math.min(width, height) / 2 | 0;
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();
for (var i = 0; i < len; i++) {
var data = graphicsData[i];
var shape = data.shape;
if (shape.type === math.SHAPES.POLY) {
var points = shape.points;
context.moveTo(points[0], points[1]);
for (var j = 1; j < points.length / 2; j++) {
context.lineTo(points[j * 2], points[(j * 2) + 1]);
}
// if the first and last point are the same close the path - much neater :)
if (points[0] === points[points.length - 2] && points[1] === points[points.length - 1]) {
context.closePath();
}
}
else if (shape.type === math.SHAPES.RECT) {
context.rect(shape.x, shape.y, shape.width, shape.height);
context.closePath();
}
else if (shape.type === math.SHAPES.CIRC) {
// TODO - need to be Undefined!
context.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
context.closePath();
}
else if (shape.type === math.SHAPES.ELIP) {
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
var w = shape.width * 2;
var h = shape.height * 2;
var x = shape.x - (w / 2);
var y = shape.y - (h / 2);
var kappa = 0.5522848;
var ox = (w / 2) * kappa; // control point offset horizontal
var oy = (h / 2) * kappa; // control point offset vertical
var xe = x + w; // x-end
var ye = y + h; // y-end
var xm = x + (w / 2); // x-middle
var ym = y + (h / 2); // y-middle
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 === math.SHAPES.RREC) {
var rx = shape.x;
var ry = shape.y;
var width = shape.width;
var height = shape.height;
var radius = shape.radius;
var maxRadius = Math.min(width, height) / 2 | 0;
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 {PIXI.CanvasRenderer} renderer - The renderer context to use.
*/
CanvasMaskManager.prototype.popMask = function (renderer) {
renderer.context.restore();
renderer.invalidateBlendMode();
};
/**
* Destroys this canvas mask manager.
*
*/
CanvasMaskManager.prototype.destroy = function () {
/* empty */
};
return CanvasMaskManager;
}());
/**
* Restores the current drawing context to the state it was before the mask was applied.
*
* @param {PIXI.CanvasRenderer} renderer - The renderer context to use.
*/
CanvasMaskManager.prototype.popMask = function popMask (renderer)
{
renderer.context.restore();
renderer.invalidateBlendMode();
};
/**
* Destroys this canvas mask manager.
*
*/
CanvasMaskManager.prototype.destroy = function destroy ()
{
/* empty */
};
/**
* Creates a little colored canvas

@@ -226,17 +210,11 @@ *

*/
function createColoredCanvas(color)
{
function createColoredCanvas(color) {
var canvas = document.createElement('canvas');
canvas.width = 6;
canvas.height = 1;
var context = canvas.getContext('2d');
context.fillStyle = color;
context.fillRect(0, 0, 6, 1);
return canvas;
}
/**

@@ -248,32 +226,20 @@ * Checks whether the Canvas BlendModes are supported by the current browser

*/
function canUseNewCanvasBlendModes()
{
if (typeof document === 'undefined')
{
function canUseNewCanvasBlendModes() {
if (typeof document === 'undefined') {
return false;
}
var magenta = createColoredCanvas('#ff00ff');
var yellow = createColoredCanvas('#ffff00');
var canvas = document.createElement('canvas');
canvas.width = 6;
canvas.height = 1;
var context = canvas.getContext('2d');
context.globalCompositeOperation = 'multiply';
context.drawImage(magenta, 0, 0);
context.drawImage(yellow, 2, 0);
var imageData = context.getImageData(2, 0, 1, 1);
if (!imageData)
{
if (!imageData) {
return false;
}
var data = imageData.data;
return (data[0] === 255 && data[1] === 0 && data[2] === 0);

@@ -291,8 +257,5 @@ }

*/
function mapCanvasBlendModesToPixi(array)
{
if ( array === void 0 ) array = [];
if (canUseNewCanvasBlendModes())
{
function mapCanvasBlendModesToPixi(array) {
if (array === void 0) { array = []; }
if (canUseNewCanvasBlendModes()) {
array[constants.BLEND_MODES.NORMAL] = 'source-over';

@@ -316,4 +279,3 @@ array[constants.BLEND_MODES.ADD] = 'lighter'; // IS THIS OK???

}
else
{
else {
// this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough'

@@ -342,3 +304,2 @@ array[constants.BLEND_MODES.NORMAL] = 'source-over';

array[constants.BLEND_MODES.SCREEN_NPM] = array[constants.BLEND_MODES.SCREEN];
// composite operations

@@ -353,6 +314,4 @@ array[constants.BLEND_MODES.SRC_IN] = 'source-in';

array[constants.BLEND_MODES.XOR] = 'xor';
// SUBTRACT from flash, does not exist in canvas
array[constants.BLEND_MODES.SUBTRACT] = 'source-over';
return array;

@@ -362,3 +321,2 @@ }

var tempMatrix = new math.Matrix();
/**

@@ -374,9 +332,24 @@ * The CanvasRenderer draws the scene and all its content onto a 2d canvas.

*/
var CanvasRenderer = /*@__PURE__*/(function (AbstractRenderer) {
function CanvasRenderer(options, arg2, arg3)
{
AbstractRenderer.call(this, 'Canvas', options, arg2, arg3);
this.type = constants.RENDERER_TYPE.CANVAS;
var CanvasRenderer = /** @class */ (function (_super) {
__extends(CanvasRenderer, _super);
/**
* @param {object} [options] - The optional renderer parameters
* @param {number} [options.width=800] - the width of the screen
* @param {number} [options.height=600] - the height of the screen
* @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional
* @param {boolean} [options.transparent=false] - If the render view is transparent, default false
* @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for
* resolutions other than 1
* @param {boolean} [options.antialias=false] - sets antialias
* @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The
* resolution of the renderer retina would be 2.
* @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation,
* enable this if you need to call toDataUrl on the webgl context.
* @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or
* not before the new render pass.
* @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area
* (shown if not transparent).
*/
function CanvasRenderer(options) {
var _this = _super.call(this, constants.RENDERER_TYPE.CANVAS, options) || this;
/**

@@ -387,4 +360,3 @@ * The root canvas 2d context that everything is drawn with.

*/
this.rootContext = this.view.getContext('2d', { alpha: this.transparent });
_this.rootContext = _this.view.getContext('2d', { alpha: _this.transparent });
/**

@@ -395,4 +367,3 @@ * The currently active canvas 2d context (could change with renderTextures)

*/
this.context = this.rootContext;
_this.context = _this.rootContext;
/**

@@ -403,4 +374,3 @@ * Boolean flag controlling canvas refresh.

*/
this.refresh = true;
_this.refresh = true;
/**

@@ -411,4 +381,3 @@ * Instance of a CanvasMaskManager, handles masking when using the canvas renderer.

*/
this.maskManager = new CanvasMaskManager(this);
_this.maskManager = new CanvasMaskManager(_this);
/**

@@ -419,26 +388,19 @@ * The canvas property used to set the canvas smoothing property.

*/
this.smoothProperty = 'imageSmoothingEnabled';
if (!this.rootContext.imageSmoothingEnabled)
{
if (this.rootContext.webkitImageSmoothingEnabled)
{
this.smoothProperty = 'webkitImageSmoothingEnabled';
_this.smoothProperty = 'imageSmoothingEnabled';
if (!_this.rootContext.imageSmoothingEnabled) {
var rc = _this.rootContext;
if (rc.webkitImageSmoothingEnabled) {
_this.smoothProperty = 'webkitImageSmoothingEnabled';
}
else if (this.rootContext.mozImageSmoothingEnabled)
{
this.smoothProperty = 'mozImageSmoothingEnabled';
else if (rc.mozImageSmoothingEnabled) {
_this.smoothProperty = 'mozImageSmoothingEnabled';
}
else if (this.rootContext.oImageSmoothingEnabled)
{
this.smoothProperty = 'oImageSmoothingEnabled';
else if (rc.oImageSmoothingEnabled) {
_this.smoothProperty = 'oImageSmoothingEnabled';
}
else if (this.rootContext.msImageSmoothingEnabled)
{
this.smoothProperty = 'msImageSmoothingEnabled';
else if (rc.msImageSmoothingEnabled) {
_this.smoothProperty = 'msImageSmoothingEnabled';
}
}
this.initPlugins(CanvasRenderer.__plugins);
_this.initPlugins(CanvasRenderer.__plugins);
/**

@@ -449,6 +411,5 @@ * Tracks the blend modes useful for this renderer.

*/
this.blendModes = mapCanvasBlendModesToPixi();
this._activeBlendMode = null;
this._outerBlend = false;
_this.blendModes = mapCanvasBlendModesToPixi();
_this._activeBlendMode = null;
_this._outerBlend = false;
/**

@@ -459,8 +420,5 @@ * Projection transform, passed in render() stored here

*/
this._projTransform = null;
this.renderingToScreen = false;
_this._projTransform = null;
_this.renderingToScreen = false;
utils.sayHello('Canvas');
/**

@@ -471,3 +429,2 @@ * Fired after rendering finishes.

*/
/**

@@ -478,10 +435,5 @@ * Fired before rendering starts.

*/
this.resize(this.options.width, this.options.height);
_this.resize(_this.options.width, _this.options.height);
return _this;
}
if ( AbstractRenderer ) CanvasRenderer.__proto__ = AbstractRenderer;
CanvasRenderer.prototype = Object.create( AbstractRenderer && AbstractRenderer.prototype );
CanvasRenderer.prototype.constructor = CanvasRenderer;
/**

@@ -493,63 +445,38 @@ * Renders the object to this canvas view

* If unset, it will render to the root context.
* @param {boolean} [clear=false] - Whether to clear the canvas before drawing
* @param {boolean} [clear=this.clearBeforeRender] - Whether to clear the canvas before drawing
* @param {PIXI.Matrix} [transform] - A transformation to be applied
* @param {boolean} [skipUpdateTransform=false] - Whether to skip the update transform
*/
CanvasRenderer.prototype.render = function render (displayObject, renderTexture, clear, transform, skipUpdateTransform)
{
if (!this.view)
{
CanvasRenderer.prototype.render = function (displayObject, renderTexture, clear, transform, skipUpdateTransform) {
if (!this.view) {
return;
}
// can be handy to know!
this.renderingToScreen = !renderTexture;
this.emit('prerender');
var rootResolution = this.resolution;
if (renderTexture)
{
renderTexture = renderTexture.baseTexture || renderTexture;
if (!renderTexture._canvasRenderTarget)
{
renderTexture._canvasRenderTarget = new utils.CanvasRenderTarget(
renderTexture.width,
renderTexture.height,
renderTexture.resolution
);
if (renderTexture) {
renderTexture = renderTexture.castToBaseTexture();
if (!renderTexture._canvasRenderTarget) {
renderTexture._canvasRenderTarget = new utils.CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution);
renderTexture.resource = new core.resources.CanvasResource(renderTexture._canvasRenderTarget.canvas);
renderTexture.valid = true;
}
this.context = renderTexture._canvasRenderTarget.context;
this.resolution = renderTexture._canvasRenderTarget.resolution;
}
else
{
else {
this.context = this.rootContext;
}
var context = this.context;
this._projTransform = transform || null;
if (!renderTexture)
{
if (!renderTexture) {
this._lastObjectRendered = displayObject;
}
if (!skipUpdateTransform)
{
if (!skipUpdateTransform) {
// update the scene graph
var cacheParent = displayObject.parent;
displayObject.parent = this._tempDisplayObjectParent;
var cacheParent = displayObject.enableTempParent();
displayObject.updateTransform();
displayObject.parent = cacheParent;
// displayObject.hitArea = //TODO add a temp hit area
displayObject.disableTempParent(cacheParent);
}
context.save();

@@ -561,36 +488,32 @@ context.setTransform(1, 0, 0, 1, 0, 0);

context.globalCompositeOperation = this.blendModes[constants.BLEND_MODES.NORMAL];
if (clear !== undefined ? clear : this.clearBeforeRender)
{
if (this.renderingToScreen)
{
if (this.transparent)
{
if (clear !== undefined ? clear : this.clearBeforeRender) {
if (this.renderingToScreen) {
if (this.transparent) {
context.clearRect(0, 0, this.width, this.height);
}
else
{
else {
context.fillStyle = this._backgroundColorString;
context.fillRect(0, 0, this.width, this.height);
}
} // else {
// TODO: implement background for CanvasRenderTarget or RenderTexture?
// }
}
else {
renderTexture = renderTexture;
renderTexture._canvasRenderTarget.clear();
var clearColor = renderTexture.clearColor;
if (clearColor[3] > 0) {
context.fillStyle = utils.hex2string(utils.rgb2hex(clearColor));
context.fillRect(0, 0, renderTexture.realWidth, renderTexture.realHeight);
}
}
}
// TODO RENDER TARGET STUFF HERE..
var tempContext = this.context;
this.context = context;
displayObject.renderCanvas(this);
this.context = tempContext;
context.restore();
this.resolution = rootResolution;
this._projTransform = null;
this.emit('postrender');
};
/**

@@ -600,16 +523,12 @@ * sets matrix of context

* takes care about resolution
* @param {PIXI.Matrix} transform world matrix of current element
* @param {boolean} [roundPixels] whether to round (tx,ty) coords
* @param {number} [localResolution] If specified, used instead of `renderer.resolution` for local scaling
* @param {PIXI.Matrix} transform - world matrix of current element
* @param {boolean} [roundPixels] - whether to round (tx,ty) coords
* @param {number} [localResolution] - If specified, used instead of `renderer.resolution` for local scaling
*/
CanvasRenderer.prototype.setContextTransform = function setContextTransform (transform, roundPixels, localResolution)
{
CanvasRenderer.prototype.setContextTransform = function (transform, roundPixels, localResolution) {
var mat = transform;
var proj = this._projTransform;
var resolution = this.resolution;
localResolution = localResolution || resolution;
if (proj)
{
if (proj) {
mat = tempMatrix;

@@ -619,27 +538,9 @@ mat.copyFrom(transform);

}
if (roundPixels)
{
this.context.setTransform(
mat.a * localResolution,
mat.b * localResolution,
mat.c * localResolution,
mat.d * localResolution,
(mat.tx * resolution) | 0,
(mat.ty * resolution) | 0
);
if (roundPixels) {
this.context.setTransform(mat.a * localResolution, mat.b * localResolution, mat.c * localResolution, mat.d * localResolution, (mat.tx * resolution) | 0, (mat.ty * resolution) | 0);
}
else
{
this.context.setTransform(
mat.a * localResolution,
mat.b * localResolution,
mat.c * localResolution,
mat.d * localResolution,
mat.tx * resolution,
mat.ty * resolution
);
else {
this.context.setTransform(mat.a * localResolution, mat.b * localResolution, mat.c * localResolution, mat.d * localResolution, mat.tx * resolution, mat.ty * resolution);
}
};
/**

@@ -650,19 +551,13 @@ * Clear the canvas of renderer.

*/
CanvasRenderer.prototype.clear = function clear (clearColor)
{
CanvasRenderer.prototype.clear = function (clearColor) {
var context = this.context;
clearColor = clearColor || this._backgroundColorString;
if (!this.transparent && clearColor)
{
if (!this.transparent && clearColor) {
context.fillStyle = clearColor;
context.fillRect(0, 0, this.width, this.height);
}
else
{
else {
context.clearRect(0, 0, this.width, this.height);
}
};
/**

@@ -675,4 +570,3 @@ * Sets the blend mode of the renderer.

*/
CanvasRenderer.prototype.setBlendMode = function setBlendMode (blendMode, readyForOuterBlend)
{
CanvasRenderer.prototype.setBlendMode = function (blendMode, readyForOuterBlend) {
var outerBlend = blendMode === constants.BLEND_MODES.SRC_IN

@@ -682,13 +576,8 @@ || blendMode === constants.BLEND_MODES.SRC_OUT

|| blendMode === constants.BLEND_MODES.DST_ATOP;
if (!readyForOuterBlend && outerBlend)
{
if (!readyForOuterBlend && outerBlend) {
blendMode = constants.BLEND_MODES.NORMAL;
}
if (this._activeBlendMode === blendMode)
{
if (this._activeBlendMode === blendMode) {
return;
}
this._activeBlendMode = blendMode;

@@ -698,3 +587,2 @@ this._outerBlend = outerBlend;

};
/**

@@ -705,17 +593,11 @@ * Removes everything from the renderer and optionally removes the Canvas DOM element.

*/
CanvasRenderer.prototype.destroy = function destroy (removeView)
{
CanvasRenderer.prototype.destroy = function (removeView) {
// call the base destroy
AbstractRenderer.prototype.destroy.call(this, removeView);
_super.prototype.destroy.call(this, removeView);
this.context = null;
this.refresh = true;
this.maskManager.destroy();
this.maskManager = null;
this.smoothProperty = null;
};
/**

@@ -729,22 +611,16 @@ * Resizes the canvas view to the specified width and height.

*/
CanvasRenderer.prototype.resize = function resize (screenWidth, screenHeight)
{
AbstractRenderer.prototype.resize.call(this, screenWidth, screenHeight);
CanvasRenderer.prototype.resize = function (screenWidth, screenHeight) {
_super.prototype.resize.call(this, screenWidth, screenHeight);
// reset the scale mode.. oddly this seems to be reset when the canvas is resized.
// surely a browser bug?? Let PixiJS fix that for you..
if (this.smoothProperty)
{
if (this.smoothProperty) {
this.rootContext[this.smoothProperty] = (settings.settings.SCALE_MODE === constants.SCALE_MODES.LINEAR);
}
};
/**
* Checks if blend mode has changed.
*/
CanvasRenderer.prototype.invalidateBlendMode = function invalidateBlendMode ()
{
CanvasRenderer.prototype.invalidateBlendMode = function () {
this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation);
};
/**

@@ -757,8 +633,7 @@ * Collection of installed plugins. These are included by default in PIXI, but can be excluded

* @readonly
* @property {PIXI.accessibility.AccessibilityManager} accessibility Support tabbing interactive elements.
* @property {PIXI.AccessibilityManager} accessibility Support tabbing interactive elements.
* @property {PIXI.CanvasExtract} extract Extract image data from renderer.
* @property {PIXI.interaction.InteractionManager} interaction Handles mouse, touch and pointer events.
* @property {PIXI.InteractionManager} interaction Handles mouse, touch and pointer events.
* @property {PIXI.CanvasPrepare} prepare Pre-render display objects.
*/
/**

@@ -771,8 +646,6 @@ * Adds a plugin to the renderer.

*/
CanvasRenderer.registerPlugin = function registerPlugin (pluginName, ctor)
{
CanvasRenderer.registerPlugin = function (pluginName, ctor) {
CanvasRenderer.__plugins = CanvasRenderer.__plugins || {};
CanvasRenderer.__plugins[pluginName] = ctor;
};
return CanvasRenderer;

@@ -791,2 +664,3 @@ }(core.AbstractRenderer));

var canvasUtils = {
canvas: null,
/**

@@ -802,48 +676,29 @@ * Basically this method just needs a sprite and a color and tints the sprite with the given color.

var texture = sprite.texture;
color = canvasUtils.roundColor(color);
var stringColor = "#" + ((("00000" + ((color | 0).toString(16)))).substr(-6));
var stringColor = "#" + ("00000" + (color | 0).toString(16)).substr(-6);
texture.tintCache = texture.tintCache || {};
var cachedCanvas = texture.tintCache[stringColor];
var canvas;
if (cachedCanvas)
{
if (cachedCanvas.tintId === texture._updateID)
{
if (cachedCanvas) {
if (cachedCanvas.tintId === texture._updateID) {
return texture.tintCache[stringColor];
}
canvas = texture.tintCache[stringColor];
}
else
{
else {
canvas = document.createElement('canvas');
}
canvasUtils.tintMethod(texture, color, canvas);
canvas.tintId = texture._updateID;
if (canvasUtils.convertTintToImage)
{
if (canvasUtils.convertTintToImage) {
// is this better?
var tintImage = new Image();
tintImage.src = canvas.toDataURL();
texture.tintCache[stringColor] = tintImage;
}
else
{
else {
texture.tintCache[stringColor] = canvas;
}
return canvas;
},
/**

@@ -853,3 +708,3 @@ * 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 {PIXI.Texture} texture - the sprite to tint
* @param {number} color - the color to use to tint the sprite with

@@ -860,15 +715,9 @@ * @return {HTMLCanvasElement} The tinted canvas

color = canvasUtils.roundColor(color);
var stringColor = "#" + ((("00000" + ((color | 0).toString(16)))).substr(-6));
var stringColor = "#" + ("00000" + (color | 0).toString(16)).substr(-6);
texture.patternCache = texture.patternCache || {};
var pattern = texture.patternCache[stringColor];
if (pattern && pattern.tintId === texture._updateID)
{
if (pattern && pattern.tintId === texture._updateID) {
return pattern;
}
if (!canvasUtils.canvas)
{
if (!canvasUtils.canvas) {
canvasUtils.canvas = document.createElement('canvas');

@@ -880,6 +729,4 @@ }

texture.patternCache[stringColor] = pattern;
return pattern;
},
/**

@@ -897,3 +744,2 @@ * Tint a texture using the 'multiply' operation.

var resolution = texture.baseTexture.resolution;
crop.x *= resolution;

@@ -903,43 +749,14 @@ crop.y *= 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)))).substr(-6));
context.fillStyle = "#" + ("00000" + (color | 0).toString(16)).substr(-6);
context.fillRect(0, 0, crop.width, crop.height);
context.globalCompositeOperation = 'multiply';
var source = texture.baseTexture.getDrawableSource();
context.drawImage(
source,
crop.x,
crop.y,
crop.width,
crop.height,
0,
0,
crop.width,
crop.height
);
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.drawImage(source, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
context.restore();
},
/**

@@ -953,8 +770,6 @@ * Tint a texture using the 'overlay' operation.

*/
tintWithOverlay: function tintWithOverlay(texture, color, canvas)
{
tintWithOverlay: function (texture, color, canvas) {
var context = canvas.getContext('2d');
var crop = texture._frame.clone();
var resolution = texture.baseTexture.resolution;
crop.x *= resolution;

@@ -964,28 +779,13 @@ crop.y *= 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)))).substr(-6));
context.fillStyle = "#" + ("00000" + (color | 0).toString(16)).substr(-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.drawImage(texture.baseTexture.getDrawableSource(), crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
// context.globalCompositeOperation = 'copy';
context.restore();
},
/**

@@ -1003,3 +803,2 @@ * Tint a texture pixel per pixel.

var resolution = texture.baseTexture.resolution;
crop.x *= resolution;

@@ -1009,21 +808,8 @@ crop.y *= 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.drawImage(texture.baseTexture.getDrawableSource(), crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
context.restore();
var rgbValues = utils.hex2rgb(color);

@@ -1033,9 +819,5 @@ var r = rgbValues[0];

var b = rgbValues[2];
var pixelData = context.getImageData(0, 0, crop.width, crop.height);
var pixels = pixelData.data;
for (var i = 0; i < pixels.length; i += 4)
{
for (var i = 0; i < pixels.length; i += 4) {
pixels[i + 0] *= r;

@@ -1045,6 +827,4 @@ pixels[i + 1] *= g;

}
context.putImageData(pixelData, 0, 0);
},
/**

@@ -1059,12 +839,8 @@ * Rounds the specified color according to the canvasUtils.cacheStepsPerColorChannel.

var step = canvasUtils.cacheStepsPerColorChannel;
var rgbValues = utils.hex2rgb(color);
rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step);
rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step);
rgbValues[2] = Math.min(255, (rgbValues[2] / step) * step);
return utils.rgb2hex(rgbValues);
},
/**

@@ -1077,3 +853,2 @@ * Number of steps which will be used as a cap when rounding colors.

cacheStepsPerColorChannel: 8,
/**

@@ -1086,3 +861,2 @@ * Tint cache boolean flag.

convertTintToImage: false,
/**

@@ -1095,3 +869,2 @@ * Whether or not the Canvas BlendModes are supported, consequently the ability to tint using the multiply method.

canUseMultiply: canUseNewCanvasBlendModes(),
/**

@@ -1103,7 +876,4 @@ * The tinting method that will be used.

*/
tintMethod: function () { // jslint-disable no-empty-function
},
tintMethod: null,
};
canvasUtils.tintMethod = canvasUtils.canUseMultiply ? canvasUtils.tintWithMultiply : canvasUtils.tintWithPerPixel;

@@ -1113,3 +883,2 @@

var parentCreate = core.Renderer.create;
/**

@@ -1120,18 +889,12 @@ * Override the Renderer.create to fallback to use CanvasRenderer.

*/
core.Renderer.create = function create(options)
{
core.Renderer.create = function create(options) {
var forceCanvas = options && options.forceCanvas;
if (!forceCanvas)
{
try
{
if (!forceCanvas) {
try {
return parentCreate(options);
}
catch (err)
{
catch (err) {
// swallow WebGL-unsupported error
}
}
return new CanvasRenderer(options);

@@ -1147,8 +910,16 @@ };

*/
core.BaseTexture.prototype.getDrawableSource = function getDrawableSource()
{
core.BaseTexture.prototype.getDrawableSource = function getDrawableSource() {
var resource = this.resource;
return resource ? (resource.bitmap || resource.source) : null;
};
/**
* A reference to the canvas render target (we only need one as this can be shared across renderers)
*
* @protected
* @member {PIXI.utils.CanvasRenderTarget} _canvasRenderTarget
* @memberof PIXI.BaseRenderTexture#
*/
core.BaseRenderTexture.prototype._canvasRenderTarget = null;
core.Texture.prototype.patternCache = null;
core.Texture.prototype.tintCache = null;

@@ -1155,0 +926,0 @@ exports.CanvasRenderer = CanvasRenderer;

20

package.json
{
"name": "@pixi/canvas-renderer",
"version": "5.2.4",
"version": "5.3.0",
"main": "lib/canvas-renderer.js",

@@ -27,14 +27,14 @@ "module": "lib/canvas-renderer.es.js",

"dependencies": {
"@pixi/constants": "5.2.4",
"@pixi/core": "5.2.4",
"@pixi/math": "5.2.4",
"@pixi/settings": "5.2.4",
"@pixi/utils": "5.2.4"
"@pixi/constants": "5.3.0",
"@pixi/core": "5.3.0",
"@pixi/math": "5.3.0",
"@pixi/settings": "5.3.0",
"@pixi/utils": "5.3.0"
},
"devDependencies": {
"@pixi/display": "5.2.4",
"@pixi/graphics": "5.2.4",
"@pixi/sprite": "5.2.4"
"@pixi/display": "5.3.0",
"@pixi/graphics": "5.3.0",
"@pixi/sprite": "5.3.0"
},
"gitHead": "71c6b3b2061af4a4f3a95a265d46e933b8befc2c"
"gitHead": "a9b7b32a9c0aeb3d9c42ef04b2c2a39be1cd0880"
}
dist/canvas-renderer.js.map

Sorry, the diff of this file is not supported yet

dist/canvas-renderer.min.js.map

Sorry, the diff of this file is not supported yet

lib/canvas-renderer.es.js.map

Sorry, the diff of this file is not supported yet

lib/canvas-renderer.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc