MooTools Canvas is a byproduct of Google's Excanvas and a script by Ralph Sommerer. In retrospect, I can't tell where one ends and one begins. Moreover, there hasn't been a single line of code that I haven't personally modified for performance, file-size reduction, or programming-style maintenance.
Thanks to MooTools, the new Canvas class is: small, modular, and lightweight.
TopBelow is the first example provided by the excanvas team as a showcase. For more extensive examples, scroll downwards to the Tests.
Click here to start the example.
One difference between excanvas and MooTools Canvas is that excanvas will automatically try to extend all the canvas elements with the getContext method if it was not available. MooTools Canvas, however, will not. Therefore, you must instantiate a new Canvas with the id and any properties you want the element to have.
var myCanvas = new Canvas({
id: 'myCanvasId',
width: 300,
height: 200
});
// myCanvas is now a <canvas> element. You can choose what you will do with that element.
myCanvas.inject(document.body); // for instance
Why? You may ask. Because embedded elements like the canvas tag (which are not native to HTML standard) will not have the same methods as native Elements. To keep with this convention, I made a conscious decision not to automatically instantiate. You're welcome to do it, however.
Top
Jan 19, 2008
Interestingly, this is not my first attempt to port Google's Excanvas. In fact, this is my third iteration. The first went up in flames, when work took priority and the trash can was very tempting. The second had a short shelve life span due to numerous errors that I found as I was building a Test Suite. In the process of making a Test Suite I came across Raplh Sommerer's work on his original version of vml-emulated-canvas. From there the third iteration arose. By now, the Google team had patched their original release with the new 0002 release. Having prior experience with excanvas and realizing that Sommerer's work had a critical weakness, I decided to merge the best part of both worlds. To be successful, however, I relied heavily on the Canvas Test Page.
Please do not be discouraged, if you think the page is slow in loading. The images that the tests use, are loaded dynamically. As a result, the browser has to wait for the image to load before processing the next test.
TopEven after generous testing there are still some issues that have yet been resolved. Not that they're impossible, but that I lack the time or test cases to investigate. As mentioned above, the more test cases you submit the faster I can get to the problem and the faster we can move forward. You'll find the issues knows below, and the temporary fixes (if any).
If you find an issue let me know. I can prescribe a workaround or add it here for people to ponder about -- or if you're lucky and you provide me a test case I can see if I can fix it ASAP.
TopHere's a listing of demos. If you'd like to contribute to the demos list, please send a message.
1. MooTools Canvas is meant to be used when adding the canvas element for Internet Explorer.
2. MooTools Canvas requires MooTools v1.12+. Specifically it requires Element, and its dependencies.
Top