Using Canvas Pixel Caching to Reduce jMockups’ Rendering Time By 80%+

http://blog.jmockups.com/2011/01/how-i-used-canvas-pixel-caching-to-reduce-jmockups-rendering-time-by-80/

by matt1 • 15 years ago

4 2 15 years ago

blog.jmockups.com

bgrins• 15 years ago

Nice, I have noticed the same thing when working with canvas - any time you can get the pixel level manipulation to happen in native objects there are big performance gains to be had.

I am interested on the general idea behind your new import an existing site feature. I have played around with this a little bit before, and realize that there is no way to directly render HTML onto a canvas (unless of course you have add on permissions in firefox, like this: https://developer.mozilla.org/en/drawing_graphics_with_canva...). Then of course there is something like this: http://www.cuppadev.co.uk/projects/a-browser-within-a-browse... which seems a little incomplete.

I assume you build up the elements array from the elements in the DOM, and manually generate a canvas for each one? That seems like it would be quite tedious, and handling inherited styles, etc could be a pain. Also, once you start moving elements around, they may not really have a place in the HTML anymore, so if I want to share the mockup, is it just an image, or does it become absolutely positioned HTML elements?

Great job on this by the way, I'm impressed with how well it is working.

matt1• 15 years ago

Hey, thanks for the note.

The import tool will be a bookmarklet that, when clicked, will analyze the DOM using jQuery then post that data back to jMockups, which will create a mockup based on the data that it received from the bookmarklet. It winds up being just one canvas, the same as jMockups uses now. When you share it, it will be an image, not HTML (though long term an export to HTML/CSS feature would be nice).

The tricky part, as you point out, is all the styles. You've got all the background images, repeats, position, sprites, border width, color, style, etc etc etc. Fortunately, most sites only use a fraction of them, which means that at least for the initial version, it doesn't have to handle everything. It won't be perfect, but I've found it works well on 90% of 90% of the websites.

If you have any ideas on how to improve the tool itself, let me know. Thank you again for the feedback.

Using Canvas Pixel Caching to Reduce jMockups’ Rendering Time By 80%+

Related Stories