Sundae.js - 0.5 release

Another installation of the budding Canvas reference tester is out!

What is it?
Sundae is framework built to provide a visual pixel difference of rendered images in Html5 canvases. The focus was on providing the functionality to load an known good render result and a render result from your library.

That way when changes are made to your rendering library you can see what the results are. The results come in the form of an exact pixel comparison, plus everything is rendered beside each other for easy visual discernment.

Available here:

• sundae.js 0.5

How can you help?
Have a feature to add? Found a bug? Submit tickets at:

• Sundae.js Lighthouse

Changes in 0.5:

• asynchronous reference canvas filling
• JSON loading
• Script loading
• Basic use test suite

Changes to come: 

• Asynchronous library loading
• No loading of duplicate library URL's
• Updated API
• Pixel Blurring
• Less rigid test case requirements
• Calibration test suite
• Worker thread support

Sundae.js - getting JSON files

As with my previous post,

Sundae.js uses a JSON file to control its test cases. I define a rigid API with the expected test case format, and a user fills out a JSON file at least suppling the required field. A sample of my valid JSON file can be found here.

So in order to get a JSON file, or the contents of any file as a string you need to create a XMLHttpRequest() object. The Mozilla MDC provides detailed explanations of its attributes and expected uses and cautions.

Here are the steps I followed to get this done for Sundae.js:

1. Make a XMLHttpRequest() object.
2. Set its open parameters
3. Set its onload()
1. Very handy for managing callback functions
2. Also handy for using the objects responseText
4. Set its send to null

As usual here is a pastebin of getJSON, and there you have it. Alternatively if you aren't using valid JSON for JSON.parse(responseText) of your file, you should use eval("(" + responseText + ")").

Sundae.js - script tag injecting

Have you ever wanted to add in a Javascript file to your page? The answer is surprisingly simple. I was faced with this problem in one of my current projects Sundae.js, however the problem requires a little bit of explanation. Sundae is supposed to render canvases and display them on the page for your visual comparison, it also generates a pixel difference based on exact pixel values. So in order to let your test function render to the browser I needed to dynamically load Javascript libraries and Javascript files containing your test functions.

As with most things Javascript, you can do anything including creating a script element in the parent window. Here's how:

1. Make your script object
2. Set its onload(), very handy for utilizing callback functions
3. Set the scripts source
4. Attach the script to the document

The code I use is available here:

• Pastebin
• Sundae.js' code

The script tag's type is defaulted to Javascript thanks to HTML5. Lastly you can remove the script tag from the window by calling "removeChild(scriptObj);" if your worried about such things.

You're done now! Global attributes from the included Javascript are now within your current global scope.