Skip to content

Instantly share code, notes, and snippets.

@cgbystrom
Created February 16, 2015 19:28
Show Gist options
  • Save cgbystrom/7e734d988664f1b89ff5 to your computer and use it in GitHub Desktop.
Save cgbystrom/7e734d988664f1b89ff5 to your computer and use it in GitHub Desktop.
Log calls made to HTML Canvas context (only works with 2D)
function hookCanvasGetContext () {
var ctxFns = [
'fillRect',
'save',
'restore',
'scale',
'rotate',
'translate',
'transform',
'setTransform',
'resetTransform',
'createLinearGradient',
'createRadialGradient',
'createPattern',
'clearRect',
'strokeRect',
'beginPath',
'fill',
'stroke',
'drawFocusIfNeeded',
'clip',
'isPointInPath',
'isPointInStroke',
'fillText',
'strokeText',
'measureText',
'drawImage',
'createImageData',
'getImageData',
'putImageData',
'getContextAttributes',
'setLineDash',
'getLineDash',
'setAlpha',
'setCompositeOperation',
'setLineWidth',
'setLineCap',
'setLineJoin',
'setMiterLimit',
'clearShadow',
'setStrokeColor',
'setFillColor',
'drawImageFromRect',
'setShadow',
'closePath',
'moveTo',
'lineTo',
'quadraticCurveTo',
'bezierCurveTo',
'arcTo',
'rect',
'arc',
'ellipse',
'scrollPathIntoView',
'addHitRegion',
'removeHitRegion',
'clearHitRegions',
'isContextLost'
];
var origGetContext = HTMLCanvasElement.prototype.getContext;
var callsMade = [];
function hookFunc (ctx, name) {
var origFn = ctx[name];
ctx[name] = function () {
callsMade.push([name, arguments]);
return origFn.apply(this, arguments);
};
}
window.printCanvasCalls = function () {
callsMade.forEach(function (c) {
console.log(c[0], c[1]);
})
};
HTMLCanvasElement.prototype.getContext = function () {
var ctx = origGetContext.apply(this, arguments);
ctxFns.forEach(function (fnName) {
hookFunc(ctx, fnName);
});
return ctx;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment