function CanvasRenderingContext2D(skcanvas) {
this._canvas = skcanvas;
this._paint = new CanvasKit.SkPaint();
this._paint.setAntiAlias(true);
this._paint.setStrokeMiter(10);
this._paint.setStrokeCap(CanvasKit.StrokeCap.Butt);
this._paint.setStrokeJoin(CanvasKit.StrokeJoin.Miter);
this._fontString = '10px monospace';
this._font = new CanvasKit.SkFont(null, 10);
this._strokeStyle = CanvasKit.BLACK;
this._fillStyle = CanvasKit.BLACK;
this._shadowBlur = 0;
this._shadowColor = CanvasKit.TRANSPARENT;
this._shadowOffsetX = 0;
this._shadowOffsetY = 0;
this._globalAlpha = 1;
this._strokeWidth = 1;
this._lineDashOffset = 0;
this._lineDashList = [];
// aka SkBlendMode
this._globalCompositeOperation = CanvasKit.BlendMode.SrcOver;
this._imageFilterQuality = CanvasKit.FilterQuality.Low;
this._imageSmoothingEnabled = true;
this._paint.setStrokeWidth(this._strokeWidth);
this._paint.setBlendMode(this._globalCompositeOperation);
this._currentPath = new CanvasKit.SkPath();
this._currentTransform = CanvasKit.SkMatrix.identity();
// Use this for save/restore
this._canvasStateStack = [];
// Keep a reference to all the effects (e.g. gradients, patterns)
// that were allocated for cleanup in _dispose.
this._toCleanUp = [];
this._dispose = function() {
this._currentPath.delete();
this._paint.delete();
this._font.delete();
this._toCleanUp.forEach(function(c) {
c._dispose();
});
// Don't delete this._canvas as it will be disposed
// by the surface of which it is based.
}
// This always accepts DOMMatrix/SVGMatrix or any other
// object that has properties a,b,c,d,e,f defined.
// Returns a DOM-Matrix like dictionary
Object.defineProperty(this, 'currentTransform', {
enumerable: true,
get: function() {
return {
'a' : this._currentTransform[0],
'c' : this._currentTransform[1],
'e' : this._currentTransform[2],
'b' : this._currentTransform[3],
'd' : this._currentTransform[4],
'f' : this._currentTransform[5],
};
},
// @param {DOMMatrix} matrix
set: function(matrix) {
if (matrix.a) {
// if we see a property named 'a', guess that b-f will
// also be there.
this.setTransform(matrix.a, matrix.b, matrix.c,
matrix.d, matrix.e, matrix.f);
}
}
});
Object.defineProperty(this, 'fillStyle', {
enumerable: true,
get: function() {
if (Number.isInteger(this._fillStyle)) {
return colorToString(this._fillStyle);
}
return this._fillStyle;
},
set: function(newStyle) {
if (typeof newStyle === 'string') {
this._fillStyle = parseColor(newStyle);
} else if (newStyle._getShader) {
// It's an effect that has a shader.
this._fillStyle = newStyle
}
}
});
Object.defineProperty(this, 'font', {
enumerable: true,
get: function() {
return this._fontString;
},
set: function(newFont) {
var tf = getTypeface(newFont);
if (tf) {
// tf is a "dict" according to closure, that is, the field
// names are not minified. Thus, we need to access it via
// bracket notation to tell closure not to minify these names.
this._font.setSize(tf['sizePx']);
this._font.setTypeface(tf['typeface']);
this._fontString = newFont;
}
}
});
Object.defineProperty(this, 'globalAlpha', {
enumerable: true,
get: function() {
return this._globalAlpha;
},
set: function(newAlpha) {
// ignore invalid values, as per the spec
if (!isFinite(newAlpha) || newAlpha < 0 || newAlpha > 1) {
return;
}
this._globalAlpha = newAlpha;
}
});
Object.defineProperty(this, 'globalCompositeOperation', {
enumerable: true,
get: function() {
switch (this._globalCompositeOperation) {
// composite-mode
case CanvasKit.BlendMode.SrcOver:
return 'source-over';
case CanvasKit.BlendMode.DstOver:
return 'destination-over';
case CanvasKit.BlendMode.Src:
return 'copy';
case CanvasKit.BlendMode.Dst:
return 'destination';
case CanvasKit.BlendMode.Clear:
return 'clear';
case CanvasKit.BlendMode.SrcIn:
return 'source-in';
case CanvasKit.BlendMode.DstIn:
return 'destination-in';
case CanvasKit.BlendMode.SrcOut:
return 'source-out';
case CanvasKit.BlendMode.DstOut:
return 'destination-out';
case CanvasKit.BlendMode.SrcATop:
return 'source-atop';
case CanvasKit.BlendMode.DstATop:
return 'destination-atop';
case CanvasKit.BlendMode.Xor:
return 'xor';
case CanvasKit.BlendMode.Plus:
return 'lighter';
case CanvasKit.BlendMode.Multiply:
return 'multiply';
case CanvasKit.BlendMode.Screen:
return 'screen';
case CanvasKit.BlendMode.Overlay:
return 'overlay';
case CanvasKit.BlendMode.Darken:
return 'darken';
case CanvasKit.BlendMode.Lighten:
return 'lighten';
case CanvasKit.BlendMode.ColorDodge:
return 'color-dodge';
case CanvasKit.BlendMode.ColorBurn:
return 'color-burn';
case CanvasKit.BlendMode.HardLight:
return 'hard-light';
case CanvasKit.BlendMode.SoftLight:
return 'soft-light';
case CanvasKit.BlendMode.Difference:
return 'difference';
case CanvasKit.BlendMode.Exclusion:
return 'exclusion';
case CanvasKit.BlendMode.Hue:
return 'hue';
case CanvasKit.BlendMode.Saturation:
return 'saturation';
case CanvasKit.BlendMode.Color:
return 'color';
case CanvasKit.BlendMode.Luminosity:
return 'luminosity';
}
},
set: function(newMode) {
switch (newMode) {
// composite-mode
case 'source-over':
this._globalCompositeOperation = CanvasKit.BlendMode.SrcOver;
break;
case 'destination-over':
this._globalCompositeOperation = CanvasKit.BlendMode.DstOver;
break;
case 'copy':
this._globalCompositeOperation = CanvasKit.BlendMode.Src;
break;
case 'destination':
this._globalCompositeOperation = CanvasKit.BlendMode.Dst;
break;
case 'clear':
this._globalCompositeOperation = CanvasKit.BlendMode.Clear;
break;
case 'source-in':
this._globalCompositeOperation = CanvasKit.BlendMode.SrcIn;
break;
case 'destination-in':
this._globalCompositeOperation = CanvasKit.BlendMode.DstIn;
break;
case 'source-out':
this._globalCompositeOperation = CanvasKit.BlendMode.SrcOut;
break;
case 'destination-out':
this._globalCompositeOperation = CanvasKit.BlendMode.DstOut;
break;
case 'source-atop':
this._globalCompositeOperation = CanvasKit.BlendMode.SrcATop;
break;
case 'destination-atop':
this._globalCompositeOperation = CanvasKit.BlendMode.DstATop;
break;
case 'xor':
this._globalCompositeOperation = CanvasKit.BlendMode.Xor;
break;
case 'lighter':
this._globalCompositeOperation = CanvasKit.BlendMode.Plus;
break;
case 'plus-lighter':
this._globalCompositeOperation = CanvasKit.BlendMode.Plus;
break;
case 'plus-darker':
throw 'plus-darker is not supported';
// blend-mode
case 'multiply':
this._globalCompositeOperation = CanvasKit.BlendMode.Multiply;
break;
case 'screen':
this._globalCompositeOperation = CanvasKit.BlendMode.Screen;
break;
case 'overlay':
this._globalCompositeOperation = CanvasKit.BlendMode.Overlay;
break;
case 'darken':
this._globalCompositeOperation = CanvasKit.BlendMode.Darken;
break;
case 'lighten':
this._globalCompositeOperation = CanvasKit.BlendMode.Lighten;
break;
case 'color-dodge':
this._globalCompositeOperation = CanvasKit.BlendMode.ColorDodge;
break;
case 'color-burn':
this._globalCompositeOperation = CanvasKit.BlendMode.ColorBurn;
break;
case 'hard-light':
this._globalCompositeOperation = CanvasKit.BlendMode.HardLight;
break;
case 'soft-light':
this._globalCompositeOperation = CanvasKit.BlendMode.SoftLight;
break;
case 'difference':
this._globalCompositeOperation = CanvasKit.BlendMode.Difference;
break;
case 'exclusion':
this._globalCompositeOperation = CanvasKit.BlendMode.Exclusion;
break;
case 'hue':
this._globalCompositeOperation = CanvasKit.BlendMode.Hue;
break;
case 'saturation':
this._globalCompositeOperation = CanvasKit.BlendMode.Saturation;
break;
case 'color':
this._globalCompositeOperation = CanvasKit.BlendMode.Color;
break;
case 'luminosity':
this._globalCompositeOperation = CanvasKit.BlendMode.Luminosity;
break;
default:
return;
}
this._paint.setBlendMode(this._globalCompositeOperation);
}
});
Object.defineProperty(this, 'imageSmoothingEnabled', {
enumerable: true,
get: function() {
return this._imageSmoothingEnabled;
},
set: function(newVal) {
this._imageSmoothingEnabled = !!newVal;
}
});
Object.defineProperty(this, 'imageSmoothingQuality', {
enumerable: true,
get: function() {
switch (this._imageFilterQuality) {
case CanvasKit.FilterQuality.Low:
return 'low';
case CanvasKit.FilterQuality.Medium:
return 'medium';
case CanvasKit.FilterQuality.High:
return 'high';
}
},
set: function(newQuality) {
switch (newQuality) {
case 'low':
this._imageFilterQuality = CanvasKit.FilterQuality.Low;
return;
case 'medium':
this._imageFilterQuality = CanvasKit.FilterQuality.Medium;
return;
case 'high':
this._imageFilterQuality = CanvasKit.FilterQuality.High;
return;
}
}
});
Object.defineProperty(this, 'lineCap', {
enumerable: true,
get: function() {
switch (this._paint.getStrokeCap()) {
case CanvasKit.StrokeCap.Butt:
return 'butt';
case CanvasKit.StrokeCap.Round:
return 'round';
case CanvasKit.StrokeCap.Square:
return 'square';
}
},
set: function(newCap) {
switch (newCap) {
case 'butt':
this._paint.setStrokeCap(CanvasKit.StrokeCap.Butt);
return;
case 'round':
this._paint.setStrokeCap(CanvasKit.StrokeCap.Round);
return;
case 'square':
this._paint.setStrokeCap(CanvasKit.StrokeCap.Square);
return;
}
}
});
Object.defineProperty(this, 'lineDashOffset', {
enumerable: true,
get: function() {
return this._lineDashOffset;
},
set: function(newOffset) {
if (!isFinite(newOffset)) {
return;
}
this._lineDashOffset = newOffset;
}
});
Object.defineProperty(this, 'lineJoin', {
enumerable: true,
get: function() {
switch (this._paint.getStrokeJoin()) {
case CanvasKit.StrokeJoin.Miter:
return 'miter';
case CanvasKit.StrokeJoin.Round:
return 'round';
case CanvasKit.StrokeJoin.Bevel:
return 'bevel';
}
},
set: function(newJoin) {
switch (newJoin) {
case 'miter':
this._paint.setStrokeJoin(CanvasKit.StrokeJoin.Miter);
return;
case 'round':
this._paint.setStrokeJoin(CanvasKit.StrokeJoin.Round);
return;
case 'bevel':
this._paint.setStrokeJoin(CanvasKit.StrokeJoin.Bevel);
return;
}
}
});
Object.defineProperty(this, 'lineWidth', {
enumerable: true,
get: function() {
return this._paint.getStrokeWidth();
},
set: function(newWidth) {
if (newWidth <= 0 || !newWidth) {
// Spec says to ignore NaN/Inf/0/negative values
return;
}
this._strokeWidth = newWidth;
this._paint.setStrokeWidth(newWidth);
}
});
Object.defineProperty(this, 'miterLimit', {
enumerable: true,
get: function() {
return this._paint.getStrokeMiter();
},
set: function(newLimit) {
if (newLimit <= 0 || !newLimit) {
// Spec says to ignore NaN/Inf/0/negative values
return;
}
this._paint.setStrokeMiter(newLimit);
}
});
Object.defineProperty(this, 'shadowBlur', {
enumerable: true,
get: function() {
return this._shadowBlur;
},
set: function(newBlur) {
// ignore negative, inf and NAN (but not 0) as per the spec.
if (newBlur < 0 || !isFinite(newBlur)) {
return;
}
this._shadowBlur = newBlur;
}
});
Object.defineProperty(this, 'shadowColor', {
enumerable: true,
get: function() {
return colorToString(this._shadowColor);
},
set: function(newColor) {
this._shadowColor = parseColor(newColor);
}
});
Object.defineProperty(this, 'shadowOffsetX', {
enumerable: true,
get: function() {
return this._shadowOffsetX;
},
set: function(newOffset) {
if (!isFinite(newOffset)) {
return;
}
this._shadowOffsetX = newOffset;
}
});
Object.defineProperty(this, 'shadowOffsetY', {
enumerable: true,
get: function() {
return this._shadowOffsetY;
},
set: function(newOffset) {
if (!isFinite(newOffset)) {
return;
}
this._shadowOffsetY = newOffset;
}
});
Object.defineProperty(this, 'strokeStyle', {
enumerable: true,
get: function() {
return colorToString(this._strokeStyle);
},
set: function(newStyle) {
if (typeof newStyle === 'string') {
this._strokeStyle = parseColor(newStyle);
} else if (newStyle._getShader) {
// It's probably an effect.
this._strokeStyle = newStyle
}
}
});
this.arc = function(x, y, radius, startAngle, endAngle, ccw) {
arc(this._currentPath, x, y, radius, startAngle, endAngle, ccw);
}
this.arcTo = function(x1, y1, x2, y2, radius) {
arcTo(this._currentPath, x1, y1, x2, y2, radius);
}
// As per the spec this doesn't begin any paths, it only
// clears out any previous paths.
this.beginPath = function() {
this._currentPath.delete();
this._currentPath = new CanvasKit.SkPath();
}
this.bezierCurveTo = function(cp1x, cp1y, cp2x, cp2y, x, y) {
bezierCurveTo(this._currentPath, cp1x, cp1y, cp2x, cp2y, x, y);
}
this.clearRect = function(x, y, width, height) {
this._paint.setStyle(CanvasKit.PaintStyle.Fill);
this._paint.setBlendMode(CanvasKit.BlendMode.Clear);
this._canvas.drawRect(CanvasKit.XYWHRect(x, y, width, height), this._paint);
this._paint.setBlendMode(this._globalCompositeOperation);
}
this.clip = function(path, fillRule) {
if (typeof path === 'string') {
// shift the args if a Path2D is supplied
fillRule = path;
path = this._currentPath;
} else if (path && path._getPath) {
path = path._getPath();
}
if (!path) {
path = this._currentPath;
}
var clip = path.copy();
if (fillRule && fillRule.toLowerCase() === 'evenodd') {
clip.setFillType(CanvasKit.FillType.EvenOdd);
} else {
clip.setFillType(CanvasKit.FillType.Winding);
}
this._canvas.clipPath(clip, CanvasKit.ClipOp.Intersect, true);
clip.delete();
}
this.closePath = function() {
closePath(this._currentPath);
}
this.createImageData = function() {
// either takes in 1 or 2 arguments:
// - imagedata on which to copy *width* and *height* only
// - width, height
if (arguments.length === 1) {
var oldData = arguments[0];
var byteLength = 4 * oldData.width * oldData.height;
return new ImageData(new Uint8ClampedArray(byteLength),
oldData.width, oldData.height);
} else if (arguments.length === 2) {
var width = arguments[0];
var height = arguments[1];
var byteLength = 4 * width * height;
return new ImageData(new Uint8ClampedArray(byteLength),
width, height);
} else {
throw 'createImageData expects 1 or 2 arguments, got '+arguments.length;
}
}
this.createLinearGradient = function(x1, y1, x2, y2) {
if (!allAreFinite(arguments)) {
return;
}
var lcg = new LinearCanvasGradient(x1, y1, x2, y2);
this._toCleanUp.push(lcg);
return lcg;
}
this.createPattern = function(image, repetition) {
var cp = new CanvasPattern(image, repetition);
this._toCleanUp.push(cp);
return cp;
}
this.createRadialGradient = function(x1, y1, r1, x2, y2, r2) {
if (!allAreFinite(arguments)) {
return;
}
var rcg = new RadialCanvasGradient(x1, y1, r1, x2, y2, r2);
this._toCleanUp.push(rcg);
return rcg;
}
this._imagePaint = function() {
var iPaint = this._fillPaint();
if (!this._imageSmoothingEnabled) {
iPaint.setFilterQuality(CanvasKit.FilterQuality.None);
} else {
iPaint.setFilterQuality(this._imageFilterQuality);
}
return iPaint;
}
this.drawImage = function(img) {
// 3 potential sets of arguments
// - image, dx, dy
// - image, dx, dy, dWidth, dHeight
// - image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight
// use the fillPaint, which has the globalAlpha in it
// which drawImageRect will use.
var iPaint = this._imagePaint();
if (arguments.length === 3 || arguments.length === 5) {
var destRect = CanvasKit.XYWHRect(arguments[1], arguments[2],
arguments[3] || img.width(), arguments[4] || img.height());
var srcRect = CanvasKit.XYWHRect(0, 0, img.width(), img.height());
} else if (arguments.length === 9){
var destRect = CanvasKit.XYWHRect(arguments[5], arguments[6],
arguments[7], arguments[8]);
var srcRect = CanvasKit.XYWHRect(arguments[1], arguments[2],
arguments[3], arguments[4]);
} else {
throw 'invalid number of args for drawImage, need 3, 5, or 9; got '+ arguments.length;
}
this._canvas.drawImageRect(img, srcRect, destRect, iPaint, false);
iPaint.dispose();
}
this.ellipse = function(x, y, radiusX, radiusY, rotation,
startAngle, endAngle, ccw) {
ellipse(this._currentPath, x, y, radiusX, radiusY, rotation,
startAngle, endAngle, ccw);
}
// A helper to copy the current paint, ready for filling
// This applies the global alpha.
// Call dispose() after to clean up.
this._fillPaint = function() {
var paint = this._paint.copy();
paint.setStyle(CanvasKit.PaintStyle.Fill);
if (Number.isInteger(this._fillStyle)) {
var alphaColor = CanvasKit.multiplyByAlpha(this._fillStyle, this._globalAlpha);
paint.setColor(alphaColor);
} else {
var shader = this._fillStyle._getShader(this._currentTransform);
paint.setColor(CanvasKit.Color(0,0,0, this._globalAlpha));
paint.setShader(shader);
}
paint.dispose = function() {
// If there are some helper effects in the future, clean them up
// here. In any case, we have .dispose() to make _fillPaint behave
// like _strokePaint and _shadowPaint.
this.delete();
}
return paint;
}
this.fill = function(path, fillRule) {
if (typeof path === 'string') {
// shift the args if a Path2D is supplied
fillRule = path;
path = this._currentPath;
} else if (path && path._getPath) {
path = path._getPath();
}
if (fillRule === 'evenodd') {
this._currentPath.setFillType(CanvasKit.FillType.EvenOdd);
} else if (fillRule === 'nonzero' || !fillRule) {
this._currentPath.setFillType(CanvasKit.FillType.Winding);
} else {
throw 'invalid fill rule';
}
if (!path) {
path = this._currentPath;
}
var fillPaint = this._fillPaint();
var shadowPaint = this._shadowPaint(fillPaint);
if (shadowPaint) {
this._canvas.save();
this._canvas.concat(this._shadowOffsetMatrix());
this._canvas.drawPath(path, shadowPaint);
this._canvas.restore();
shadowPaint.dispose();
}
this._canvas.drawPath(path, fillPaint);
fillPaint.dispose();
}
this.fillRect = function(x, y, width, height) {
var fillPaint = this._fillPaint();
this._canvas.drawRect(CanvasKit.XYWHRect(x, y, width, height), fillPaint);
fillPaint.dispose();
}
this.fillText = function(text, x, y, maxWidth) {
// TODO do something with maxWidth, probably involving measure
var fillPaint = this._fillPaint();
var blob = CanvasKit.SkTextBlob.MakeFromText(text, this._font);
var shadowPaint = this._shadowPaint(fillPaint);
if (shadowPaint) {
this._canvas.save();
this._canvas.concat(this._shadowOffsetMatrix());
this._canvas.drawTextBlob(blob, x, y, shadowPaint);
this._canvas.restore();
shadowPaint.dispose();
}
this._canvas.drawTextBlob(blob, x, y, fillPaint);
blob.delete();
fillPaint.dispose();
}
this.getImageData = function(x, y, w, h) {
var pixels = this._canvas.readPixels(x, y, w, h);
if (!pixels) {
return null;
}
// This essentially re-wraps the pixels from a Uint8Array to
// a Uint8ClampedArray (without making a copy of pixels).
return new ImageData(
new Uint8ClampedArray(pixels.buffer),
w, h);
}
this.getLineDash = function() {
return this._lineDashList.slice();
}
this._mapToLocalCoordinates = function(pts) {
var inverted = CanvasKit.SkMatrix.invert(this._currentTransform);
CanvasKit.SkMatrix.mapPoints(inverted, pts);
return pts;
}
this.isPointInPath = function(x, y, fillmode) {
var args = arguments;
if (args.length === 3) {
var path = this._currentPath;
} else if (args.length === 4) {
var path = args[0];
x = args[1];
y = args[2];
fillmode = args[3];
} else {
throw 'invalid arg count, need 3 or 4, got ' + args.length;
}
if (!isFinite(x) || !isFinite(y)) {
return false;
}
fillmode = fillmode || 'nonzero';
if (!(fillmode === 'nonzero' || fillmode === 'evenodd')) {
return false;
}
// x and y are in canvas coordinates (i.e. unaffected by CTM)
var pts = this._mapToLocalCoordinates([x, y]);
x = pts[0];
y = pts[1];
path.setFillType(fillmode === 'nonzero' ?
CanvasKit.FillType.Winding :
CanvasKit.FillType.EvenOdd);
return path.contains(x, y);
}
this.isPointInStroke = function(x, y) {
var args = arguments;
if (args.length === 2) {
var path = this._currentPath;
} else if (args.length === 3) {
var path = args[0];
x = args[1];
y = args[2];
} else {
throw 'invalid arg count, need 2 or 3, got ' + args.length;
}
if (!isFinite(x) || !isFinite(y)) {
return false;
}
var pts = this._mapToLocalCoordinates([x, y]);
x = pts[0];
y = pts[1];
var temp = path.copy();
// fillmode is always nonzero
temp.setFillType(CanvasKit.FillType.Winding);
temp.stroke({'width': this.lineWidth, 'miter_limit': this.miterLimit,
'cap': this._paint.getStrokeCap(), 'join': this._paint.getStrokeJoin(),
'precision': 0.3, // this is what Chrome uses to compute this
});
var retVal = temp.contains(x, y);
temp.delete();
return retVal;
}
this.lineTo = function(x, y) {
lineTo(this._currentPath, x, y);
}
this.measureText = function(text) {
return {
width: this._font.measureText(text),
// TODO other measurements?
}
}
this.moveTo = function(x, y) {
moveTo(this._currentPath, x, y);
}
this.putImageData = function(imageData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight) {
if (!allAreFinite([x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight])) {
return;
}
if (dirtyX === undefined) {
// fast, simple path for basic call
this._canvas.writePixels(imageData.data, imageData.width, imageData.height, x, y);
return;
}
dirtyX = dirtyX || 0;
dirtyY = dirtyY || 0;
dirtyWidth = dirtyWidth || imageData.width;
dirtyHeight = dirtyHeight || imageData.height;
// as per https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-putimagedata
if (dirtyWidth < 0) {
dirtyX = dirtyX+dirtyWidth;
dirtyWidth = Math.abs(dirtyWidth);
}
if (dirtyHeight < 0) {
dirtyY = dirtyY+dirtyHeight;
dirtyHeight = Math.abs(dirtyHeight);
}
if (dirtyX < 0) {
dirtyWidth = dirtyWidth + dirtyX;
dirtyX = 0;
}
if (dirtyY < 0) {
dirtyHeight = dirtyHeight + dirtyY;
dirtyY = 0;
}
if (dirtyWidth <= 0 || dirtyHeight <= 0) {
return;
}
var img = CanvasKit.MakeImage(imageData.data, imageData.width, imageData.height,
CanvasKit.AlphaType.Unpremul,
CanvasKit.ColorType.RGBA_8888);
var src = CanvasKit.XYWHRect(dirtyX, dirtyY, dirtyWidth, dirtyHeight);
var dst = CanvasKit.XYWHRect(x+dirtyX, y+dirtyY, dirtyWidth, dirtyHeight);
var inverted = CanvasKit.SkMatrix.invert(this._currentTransform);
this._canvas.save();
// putImageData() operates in device space.
this._canvas.concat(inverted);
this._canvas.drawImageRect(img, src, dst, null, false);
this._canvas.restore();
img.delete();
}
this.quadraticCurveTo = function(cpx, cpy, x, y) {
quadraticCurveTo(this._currentPath, cpx, cpy, x, y);
}
this.rect = function(x, y, width, height) {
rect(this._currentPath, x, y, width, height);
}
this.resetTransform = function() {
// Apply the current transform to the path and then reset
// to the identity. Essentially "commit" the transform.
this._currentPath.transform(this._currentTransform);
var inverted = CanvasKit.SkMatrix.invert(this._currentTransform);
this._canvas.concat(inverted);
// This should be identity, modulo floating point drift.
this._currentTransform = this._canvas.getTotalMatrix();
}
this.restore = function() {
var newState = this._canvasStateStack.pop();
if (!newState) {
return;
}
// "commit" the current transform. We pop, then apply the inverse of the
// popped state, which has the effect of applying just the delta of
// transforms between old and new.
var combined = CanvasKit.SkMatrix.multiply(
this._currentTransform,
CanvasKit.SkMatrix.invert(newState.ctm)
);
this._currentPath.transform(combined);
this._paint.delete();
this._paint = newState.paint;
this._lineDashList = newState.ldl;
this._strokeWidth = newState.sw;
this._strokeStyle = newState.ss;
this._fillStyle = newState.fs;
this._shadowOffsetX = newState.sox;
this._shadowOffsetY = newState.soy;
this._shadowBlur = newState.sb;
this._shadowColor = newState.shc;
this._globalAlpha = newState.ga;
this._globalCompositeOperation = newState.gco;
this._lineDashOffset = newState.ldo;
this._imageSmoothingEnabled = newState.ise;
this._imageFilterQuality = newState.isq;
this._fontString = newState.fontstr;
//TODO: textAlign, textBaseline
// restores the clip and ctm
this._canvas.restore();
this._currentTransform = this._canvas.getTotalMatrix();
}
this.rotate = function(radians) {
if (!isFinite(radians)) {
return;
}
// retroactively apply the inverse of this transform to the previous
// path so it cancels out when we apply the transform at draw time.
var inverted = CanvasKit.SkMatrix.rotated(-radians);
this._currentPath.transform(inverted);
this._canvas.rotate(radiansToDegrees(radians), 0, 0);
this._currentTransform = this._canvas.getTotalMatrix();
}
this.save = function() {
if (this._fillStyle._copy) {
var fs = this._fillStyle._copy();
this._toCleanUp.push(fs);
} else {
var fs = this._fillStyle;
}
if (this._strokeStyle._copy) {
var ss = this._strokeStyle._copy();
this._toCleanUp.push(ss);
} else {
var ss = this._strokeStyle;
}
this._canvasStateStack.push({
ctm: this._currentTransform.slice(),
ldl: this._lineDashList.slice(),
sw: this._strokeWidth,
ss: ss,
fs: fs,
sox: this._shadowOffsetX,
soy: this._shadowOffsetY,
sb: this._shadowBlur,
shc: this._shadowColor,
ga: this._globalAlpha,
ldo: this._lineDashOffset,
gco: this._globalCompositeOperation,
ise: this._imageSmoothingEnabled,
isq: this._imageFilterQuality,
paint: this._paint.copy(),
fontstr: this._fontString,
//TODO: textAlign, textBaseline
});
// Saves the clip
this._canvas.save();
}
this.scale = function(sx, sy) {
if (!allAreFinite(arguments)) {
return;
}
// retroactively apply the inverse of this transform to the previous
// path so it cancels out when we apply the transform at draw time.
var inverted = CanvasKit.SkMatrix.scaled(1/sx, 1/sy);
this._currentPath.transform(inverted);
this._canvas.scale(sx, sy);
this._currentTransform = this._canvas.getTotalMatrix();
}
this.setLineDash = function(dashes) {
for (var i = 0; i < dashes.length; i++) {
if (!isFinite(dashes[i]) || dashes[i] < 0) {
SkDebug('dash list must have positive, finite values');
return;
}
}
if (dashes.length % 2 === 1) {
// as per the spec, concatenate 2 copies of dashes
// to give it an even number of elements.
Array.prototype.push.apply(dashes, dashes);
}
this._lineDashList = dashes;
}
this.setTransform = function(a, b, c, d, e, f) {
if (!(allAreFinite(arguments))) {
return;
}
this.resetTransform();
this.transform(a, b, c, d, e, f);
}
// Returns the matrix representing the offset of the shadows. This unapplies
// the effects of the scale, which should not affect the shadow offsets.
this._shadowOffsetMatrix = function() {
var sx = this._currentTransform[0];
var sy = this._currentTransform[4];
return CanvasKit.SkMatrix.translated(this._shadowOffsetX/sx, this._shadowOffsetY/sy);
}
// Returns the shadow paint for the current settings or null if there
// should be no shadow. This ends up being a copy of the given
// paint with a blur maskfilter and the correct color.
this._shadowPaint = function(basePaint) {
// multiply first to see if the alpha channel goes to 0 after multiplication.
var alphaColor = CanvasKit.multiplyByAlpha(this._shadowColor, this._globalAlpha);
// if alpha is zero, no shadows
if (!CanvasKit.getColorComponents(alphaColor)[3]) {
return null;
}
// one of these must also be non-zero (otherwise the shadow is
// completely hidden. And the spec says so).
if (!(this._shadowBlur || this._shadowOffsetY || this._shadowOffsetX)) {
return null;
}
var shadowPaint = basePaint.copy();
shadowPaint.setColor(alphaColor);
var blurEffect = CanvasKit.MakeBlurMaskFilter(CanvasKit.BlurStyle.Normal,
SkBlurRadiusToSigma(this._shadowBlur),
false);
shadowPaint.setMaskFilter(blurEffect);
// hack up a "destructor" which also cleans up the blurEffect. Otherwise,
// we leak the blurEffect (since smart pointers don't help us in JS land).
shadowPaint.dispose = function() {
blurEffect.delete();
this.delete();
};
return shadowPaint;
}
// A helper to get a copy of the current paint, ready for stroking.
// This applies the global alpha and the dashedness.
// Call dispose() after to clean up.
this._strokePaint = function() {
var paint = this._paint.copy();
paint.setStyle(CanvasKit.PaintStyle.Stroke);
if (Number.isInteger(this._strokeStyle)) {
var alphaColor = CanvasKit.multiplyByAlpha(this._strokeStyle, this._globalAlpha);
paint.setColor(alphaColor);
} else {
var shader = this._strokeStyle._getShader(this._currentTransform);
paint.setColor(CanvasKit.Color(0,0,0, this._globalAlpha));
paint.setShader(shader);
}
paint.setStrokeWidth(this._strokeWidth);
if (this._lineDashList.length) {
var dashedEffect = CanvasKit.MakeSkDashPathEffect(this._lineDashList, this._lineDashOffset);
paint.setPathEffect(dashedEffect);
}
paint.dispose = function() {
dashedEffect && dashedEffect.delete();
this.delete();
}
return paint;
}
this.stroke = function(path) {
path = path ? path._getPath() : this._currentPath;
var strokePaint = this._strokePaint();
var shadowPaint = this._shadowPaint(strokePaint);
if (shadowPaint) {
this._canvas.save();
this._canvas.concat(this._shadowOffsetMatrix());
this._canvas.drawPath(path, shadowPaint);
this._canvas.restore();
shadowPaint.dispose();
}
this._canvas.drawPath(path, strokePaint);
strokePaint.dispose();
}
this.strokeRect = function(x, y, width, height) {
var strokePaint = this._strokePaint();
this._canvas.drawRect(CanvasKit.XYWHRect(x, y, width, height), strokePaint);
strokePaint.dispose();
}
this.strokeText = function(text, x, y, maxWidth) {
// TODO do something with maxWidth, probably involving measure
var strokePaint = this._strokePaint();
var blob = CanvasKit.SkTextBlob.MakeFromText(text, this._font);
var shadowPaint = this._shadowPaint(strokePaint);
if (shadowPaint) {
this._canvas.save();
this._canvas.concat(this._shadowOffsetMatrix());
this._canvas.drawTextBlob(blob, x, y, shadowPaint);
this._canvas.restore();
shadowPaint.dispose();
}
this._canvas.drawTextBlob(blob, x, y, strokePaint);
blob.delete();
strokePaint.dispose();
}
this.translate = function(dx, dy) {
if (!allAreFinite(arguments)) {
return;
}
// retroactively apply the inverse of this transform to the previous
// path so it cancels out when we apply the transform at draw time.
var inverted = CanvasKit.SkMatrix.translated(-dx, -dy);
this._currentPath.transform(inverted);
this._canvas.translate(dx, dy);
this._currentTransform = this._canvas.getTotalMatrix();
}
this.transform = function(a, b, c, d, e, f) {
var newTransform = [a, c, e,
b, d, f,
0, 0, 1];
// retroactively apply the inverse of this transform to the previous
// path so it cancels out when we apply the transform at draw time.
var inverted = CanvasKit.SkMatrix.invert(newTransform);
this._currentPath.transform(inverted);
this._canvas.concat(newTransform);
this._currentTransform = this._canvas.getTotalMatrix();
}
// Not supported operations (e.g. for Web only)
this.addHitRegion = function() {};
this.clearHitRegions = function() {};
this.drawFocusIfNeeded = function() {};
this.removeHitRegion = function() {};
this.scrollPathIntoView = function() {};
Object.defineProperty(this, 'canvas', {
value: null,
writable: false
});
}
function SkBlurRadiusToSigma(radius) {
// Blink (Chrome) does the following, for legacy reasons, even though it
// is against the spec. https://bugs.chromium.org/p/chromium/issues/detail?id=179006
// This may change in future releases.
// This code is staying here in case any clients are interested in using it
// to match Blink "exactly".
// if (radius <= 0)
// return 0;
// return 0.288675 * radius + 0.5;
//
// This is what the spec says, which is how Firefox and others operate.
return radius/2;
}