W3C home > Mailing lists > Public > whatwg@whatwg.org > August 2014

Re: [whatwg] [2D Canvas] Proposal: batch variants of drawImage

From: Boris Zbarsky <bzbarsky@MIT.EDU>
Date: Fri, 08 Aug 2014 21:26:16 -0400
Message-ID: <53E578B8.7010306@mit.edu>
To: whatwg@lists.whatwg.org
On 8/8/14, 8:43 PM, Rik Cabanier wrote:
> The problem is that a large number of drawImage calls have a lot of
> overhead due to JS crossings and housekeeping.

Could we please quantify this?

I measured the "JS crossings" part of this, because it's easy: Just have 
the C++ side of drawImage return immediately.  What I see if I do that 
is that a drawImage call that passes an HTMLImageElement and two 
integers takes about 17ns on my hardware in a current Firefox nightly on 

For scale, a full-up drawImage call that actually does something takes 
the following amounts of time in various browsers I have [1]:

Firefox nightly: ~9500ns/call
Chrome dev: ~4300ns/call
Safari 7.0.5 and WebKit nightly: ~3000ns/call

all with noise (when averaged across 100000 calls) that's way more than 

So I'm not sure "JS crossings" is a significant performance cost here. 
I'd be interested in which parts of "housekeeping" would be shareable 
across the multiple images in the proposal and how much time those take 
in practice.


[1] The specific testcase I used:

<!DOCTYPE html>
<img src="http://www.mozilla.org/images/mozilla-banner.gif">
   onload = function() {
     var c = document.createElement("canvas").getContext("2d");
     var count = 1000000;
     var img = document.querySelector("img");
     var start = new Date;
     for (var i = 0; i < count; ++i) c.drawImage(img, 0, 0);
     var stop = new Date;
     console.log((stop - start) / count * 1e6 + "ns per call");
Received on Saturday, 9 August 2014 01:26:45 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 17:00:22 UTC