Canvas-Performance with Background-Image

Benchmark created on October 26, 2011

Preparation HTML

<div id="testbody" style="overflow:scroll; width:650px; height:500px;"></div>

Setup

function draw( coordinates, isLateStroke, isResized, isBackgroundImage) {
      var canvas = document.createElement( 'canvas');
      canvas.width = 600;
      canvas.height = 450;
      var testbody = document.getElementById( 'testbody');
      if( testbody.firstChild)
        testbody.removeChild( testbody.firstChild);
      testbody.appendChild( canvas);
      var context = canvas.getContext( '2d');
    
    
      if( isBackgroundImage) {
        canvas.style.backgroundImage = 'url(http://screenshots.de.sftcdn.net/de/scrn/76000/76986/new-year-wallpaper-1.jpg)';
      }
    
      if( isResized) {
        context.setTransform( 1, 0, 0, 1, 0, 0);
        context.scale( 0.491, 0.491);
      } else {
        context.setTransform( 1, 0, 0, 1, 0, 0);
        context.scale( 1, 1);
      }
    
      context.lineWidth = 2;
      context.strokeStyle = '#ff0000';
      for( var i=0; i<coordinates.length; i++) {
          context.moveTo( coordinates[i][0][0], coordinates[i][0][1]);
          context.lineTo( coordinates[i][coordinates[i].length-1][0], coordinates[i][coordinates[i].length-1][1]);
          
          if( !isLateStroke)
            context.stroke();
    
      }
    
      if( isLateStroke)
        context.stroke();
    
      //testbody.removeChild( testbody.firstChild);
      //delete canvas;
    }
    
    if( !drawings) {
    var drawings = [[[304,94],[304,94],[305,89]],[[305,89],[309,80]],[[309,80],[309,81]],[[309,81],[309,82]],[[309,82],[309,85]],[[309,85],[309,94]],[[309,94],[308,107]],[[308,107],[308,115]],[[308,115],[308,124]],[[308,124],[307,132]],[[307,132],[307,139]],[[307,139],[306,145]],[[306,145],[306,152]],[[306,152],[306,155]],[[306,155],[306,156]],[[306,156],[306,157]],[[306,157],[306,156]],[[306,156],[306,155]],[[306,155],[306,151]],[[306,151],[306,147]],[[306,147],[307,143]],[[307,143],[307,138]],[[307,138],[308,126]],[[308,126],[308,120]],[[308,120],[309,116]],[[309,116],[310,109]],[[310,109],[311,104]],[[311,104],[311,100]],[[311,100],[311,99]],[[311,99],[312,100]],[[312,100],[313,101]],[[313,101],[314,103]],[[314,103],[315,106]],[[315,106],[316,109]],[[316,109],[317,112]],[[317,112],[320,120]],[[320,120],[321,125]],[[321,125],[323,130]],[[323,130],[326,139]],[[326,139],[329,143]],[[329,143],[333,149]],[[333,149],[335,151]],[[335,151],[337,153]],[[337,153],[341,156]],[[341,156],[342,157]],[[342,157],[344,157]],[[344,157],[346,156]],[[346,156],[349,154]],[[349,154],[352,149]],[[352,149],[354,145]],[[354,145],[356,141]],[[356,141],[359,128]],[[359,128],[360,122]],[[360,122],[362,115]],[[362,115],[363,108]],[[363,108],[364,97]],[[364,97],[365,92]],[[365,92],[365,89]],[[365,89],[364,86]],[[364,86],[364,84]],[[364,84],[363,84]],[[363,84],[362,83]],[[362,83],[361,83]],[[361,83],[361,85]],[[361,85],[361,86]],[[361,86],[361,86]],[[361,86],[361,86]],[[400,131],[400,131],[401,131]],[[401,131],[402,131]],[[402,131],[403,131]],[[403,131],[404,132]],[[404,132],[405,132]],[[405,132],[406,132]],[[406,132],[410,132]],[[410,132],[412,133]],[[412,133],[414,133]],[[414,133],[416,133]],[[416,133],[418,133]],[[418,133],[420,133]],[[420,133],[422,133]],[[422,133],[426,132]],[[426,132],[428,132]],[[428,132],[429,131]],[[429,131],[429,130]],[[429,130],[429,129]],[[429,129],[429,128]],[[429,128],[428,127]],[[428,127],[425,124]],[[425,124],[423,123]],[[423,123],[419,122]],[[419,122],[416,122]],[[416,122],[414,122]],[[414,122],[412,123]],[[412,123],[410,123]],[[410,123],[408,124]],[[408,124],[406,125]],[[406,125],[404,125]],[[404,125],[404,124]],[[404,124],[404,123]],[[404,123],[405,122]],[[405,122],[407,120]],[[407,120],[408,119]],[[408,119],[411,117]],[[411,117],[413,117]],[[413,117],[415,116]],[[415,116],[419,116]],[[419,116],[421,116]],[[421,116],[426,117]],[[426,117],[428,117]],[[428,117],[431,118]],[[431,118],[434,118]],[[434,118],[434,118]],[[434,118],[434,118]],[[478,97],[478,97],[479,96]],[[479,96],[480,96]],[[480,96],[481,96]],[[481,96],[485,97]],[[485,97],[487,98]],[[487,98],[490,100]],[[490,100],[495,103]],[[495,103],[498,105]],[[498,105],[500,107]],[[500,107],[503,110]],[[503,110],[507,116]],[[507,116],[510,124]],[[510,124],[511,128]],[[511,128],[512,133]],[[512,133],[513,138]],[[513,138],[515,146]],[[515,146],[517,153]],[[517,153],[518,156]],[[518,156],[519,159]],[[519,159],[520,161]],[[520,161],[522,163]],[[522,163],[524,164]],[[524,164],[524,162]],[[524,162],[524,161]],[[524,161],[523,154]],[[523,154],[521,152]],[[521,152],[518,148]],[[518,148],[516,146]],[[516,146],[513,145]],[[513,145],[511,144]],[[511,144],[509,144]],[[509,144],[504,144]],[[504,144],[502,145]],[[502,145],[500,146]],[[500,146],[494,149]],[[494,149],[492,151]],[[492,151],[489,153]],[[489,153],[487,155]],[[487,155],[484,158]],[[484,158],[482,161]],[[482,161],[481,164]],[[481,164],[483,165]],[[483,165],[484,166]],[[484,166],[485,166]],[[485,166],[487,166]],[[487,166],[489,165]],[[489,165],[491,163]],[[491,163],[491,163]],[[491,163],[491,163]],[[576,109],[576,109],[577,109]],[[577,109],[577,110]],[[577,110],[576,111]],[[576,111],[575,115]],[[575,115],[573,120]],[[573,120],[573,124]],[[573,124],[571,133]],[[571,133],[569,142]],[[569,142],[568,149]],[[568,149],[567,154]],[[567,154],[567,156]],[[567,156],[566,158]],[[566,158],[566,160]],[[566,160],[566,161]],[[566,161],[566,161]]];
    }

Test runner

draw( drawings, false, false, true);
 

draw( drawings, true, false, true);
 

draw( drawings, false, true, true);

draw( drawings, true, true, true);

draw( drawings, false, false, false);
 

draw( drawings, true, false, false);
 

draw( drawings, false, true, false);

draw( drawings, true, true, false);

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on October 26, 2011