StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POPerformance issues with HTML to canvas, where to begin?
text
Body
copied!<p>I have been working on an experiment to render HTML into a canvas image, by having javascript read all the necessary information from the loaded DOM. As canvas lacks many of the standard parts of CSS, especially when it comes to text formatting, a lot of work arounds and performance intense processes need to be done (<code>letter-spacing</code> for one). The intent is and never will be to make a fool proof HTML renderer, as it simply won't be possible, but instead try and make as accurate as it can be.</p> <p>For the sample pages, Google Chrome usually loads them significantly faster than FF. However, for some pages (usually the bigger ones), Chrome completely freezes, where as Firefox loads them fine. Now, I have been trying to pinpoint where exactly things go haywire, but haven't had much luck as it doesn't end up outputting anything in Chrome.</p> <p>Does Chrome have some limit of how many canvas draws can be performed within a certain time span, or how much system resources a page can use? How can I start untangling the bottleneck if I can't get any sort of feedback from the page at all (as it just hangs up)?</p> <p>Examples (what it should do, is render a canvas image on top of the page, which should look more or less same than the actual HTML page. You can toggle the canvas image (show/hide) by clicking it. Please don't open them either if you got unsaved work in your browsers, as it may end up hanging them as well.):</p> <p><a href="http://hertzen.com/experiments/html2canvas/demo2.html" rel="nofollow">simple test, works fine in FF/Chrome</a> </p> <p><a href="http://hertzen.com/experiments/html2canvas/demo.html" rel="nofollow">another simple test, works fine in FF/Chrome</a> </p> <p><a href="http://hertzen.com/experiments/html2canvas/tests/combination/" rel="nofollow">Complete page, works fine in FF/Chrome</a> </p> <p><a href="http://hertzen.com/experiments/html2canvas/tests/palmtrees/" rel="nofollow">Complete page, only works in FF < 4, Chrome freezes</a> </p> <p>They all use the same js which can be found <a href="http://hertzen.com/experiments/html2canvas/html2canvas.js" rel="nofollow">here</a>.</p> <p>I am not looking for a blazing fast script, as with the type of emulation this renders the images, I don't think it could even be done. Simply trying to find ways to make it perhaps slightly more efficient, without losing any of its current functionality.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload