

Using Canvas Pixel Caching to Reduce jMockups’ Rendering Time By 80%+ - matt1
http://blog.jmockups.com/2011/01/how-i-used-canvas-pixel-caching-to-reduce-jmockups-rendering-time-by-80/

======
bgrins
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...](https://developer.mozilla.org/en/drawing_graphics_with_canvas#Rendering_Web_Content_Into_A_Canvas)).
Then of course there is something like this:
[http://www.cuppadev.co.uk/projects/a-browser-within-a-
browse...](http://www.cuppadev.co.uk/projects/a-browser-within-a-browser-
htmlcanvas/) 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
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.

