On Tue, Jun 14, 2011 at 8:00 PM, Timothy Fitz <[email protected]> wrote:
> My goal is to allow our users (http://canv.as) to write javascript plugins > for our browser based image editor. As a (shippable) prototype I'm targeting > a really simple model where the plugin is a function that is passed an > object which mirrors canvas' 2d context with as minimal restrictions as is > possible. > > I couldn't find any high level notes/docs on what appears to be a fairly > large shift from Cajita to ES5/3. Is the plan to ditch Cajita? Is there a > rough timeline for that? There is a planned shift away from Cajita to ES5/3. Cajita/Valija should now be considered unsuitable for any new projects and once all of our domita tests are running on ES5/3, we plan to deprecate and remove cajita/valija from the codebase. The timeline is in order of a couple of weeks while we finalize documentation. There aren't any formal releases (that I could find) of Caja. Do > you recommend just building off of and deploying from svn HEAD? > Alternatively, the pushes to maven can be considered release cuts from trunk. http://code.google.com/p/google-caja/source/browse/#svn%2Fmaven%2Fcaja%2Fcaja None of the APIs in caja.js appear to be able to let me build a fake > canvas2d context object. Specifically, I couldn't figure out how to write > getters/setters, which are necessary. After a bunch of source diving, I > landed on the solution of reaching into the frame and instantiating an > Object from there, and then calling DefineOwnProperty___ directly. I'm not > sure if it's expected or ugly or just plain broken, any feedback would be > appreciated. (This code ignores > ImageData/TextMetrics/CanvasGradient/CanvasPattern for now) Full code here: > Domita provides a taming for Canvas2D. Domita itself does not provide the ability to expose the canvas api without exposing the rest of the DOM api, however, may give you enough hints to tame just the canvas directly. http://code.google.com/p/google-caja/source/browse/trunk/src/com/google/caja/plugin/domita.js#2588 function tame_context2d(ctx) { > var tamed_ctx = new frame.iframe.contentWindow.Object(); > var methods = ['save', 'restore', 'rotate', 'scale', 'setTransform', > 'transform', 'translate', 'createLinearGradient', 'createRadialGradient', > 'createPattern', 'clearRect', 'fillRect', 'strokeRect', 'arc', 'arcTo', > 'beginPath', 'bezierCurveTo', 'clip', 'closePath', 'fill', 'lineTo', > 'moveTo', 'quadraticCurveTo', 'rect', 'stroke', 'isPointInPath', 'fillText', > 'measureText', 'strokeText', 'drawImage', 'createImageData', 'getImageData', > 'putImageData']; > var properties = ['globalAlpha', 'globalCompositeOperation', > 'fillStyle', 'strokeStyle', 'lineCap', 'lineJoin', 'lineWidth', > 'miterLimit', 'shadowBlur', 'shadowColor', 'shadowOffsetX', 'shadowOffsetY', > 'font', 'textAlign', 'textBaseline']; > for (var i = 0; i < methods.length; ++i) { > (function (method_name) { > tamed_ctx.DefineOwnProperty___(method_name, { > enumerable: true, > configurable: false, > get: frameGroup.tame(frameGroup.markFunction(function () { > return > frameGroup.tame(frameGroup.markFunction(ctx[method_name].bind(ctx))); > })) > }); > })(methods[i]); > } > > for (var j = 0; j < properties.length; ++j) { > (function (prop_name){ > function get() { return ctx[prop_name]; } > function set(v) { ctx[prop_name] = v; } > > tamed_ctx.DefineOwnProperty___(prop_name, { > enumerable: true, > configurable: false, > get: frameGroup.tame(frameGroup.markFunction(get)), > set: frameGroup.tame(frameGroup.markFunction(set)), > }); > })(properties[j]); > } > > return tamed_ctx; > } > >
