opacity animations using css vs. html5 canvas (v3)

Revision 3 of this benchmark created on

Description

Still a work in progress (i.e. some weirdness is present)...

Tests the speed of rendering an semi-opaque image on top of another using HTML and CSS vs. Canvas

Preparation HTML

<div style="position: relative; width: 256px; height: 256px;">
  <img src="#" id="background" width="256" height="256" style="position: absolute; left: 0px; top 0px"
  ;>
  <img src="#" id="overlay" width="90" height="46">
</div>
<canvas id="canvas" style="position: relative; width: 256px; height: 256px;">
</canvas>
<script>
  var backgroundSrc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAIAAADTED8xAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUU0NkFBNjVCNDhCMTFFMDg0MEFGNkREN0M3OTcyQjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUU0NkFBNjZCNDhCMTFFMDg0MEFGNkREN0M3OTcyQjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5RTQ2QUE2M0I0OEIxMUUwODQwQUY2REQ3Qzc5NzJCNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5RTQ2QUE2NEI0OEIxMUUwODQwQUY2REQ3Qzc5NzJCNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhCa8uwAABATSURBVHja7JwPUxs5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";
  var fadeSrc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAuCAYAAACoGw7VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAkBJREFUeNrs271SwkAQAOC7VJRUTjop7YQ3gCdgqCyF1krfxMoZK6C0ipRU+gbEzk5KxorS0l1mGVZIxsT7MZfsztwEZjTkPpbcb7RyEGcPqzYcXqB0VViRQhl83vS2tk8cObrgJEBkRdecuDhx5CCbp3Doq3CjT3WwGtoB8pj9DBeBIQ/ZL3EGt5BJ5aBrgOwUWwuyH2wtyH6wI0PkW4a8gbJU9Ykl1QljTHX1n9HwwQg8ZchzKF+qXtGCcg0lpvcTyOyZN+iGIFvF1oLsB1sLsh/s6I/I24YhK6rrnOqOMSUTexkNJ8RuDk4StdkHblQzI6bMbhE6TkKlxtCCbAdbC7IfbC3IfrC1IPvB1hnIHTisCBnjUZB/jQ5h73tkPcBe53bvaAkqYcgLQS4Ua3WYTNsZkuVpRmes8+E/pmJYKtBuSK9/rD9qQfaDrQXZD3YkyE6CL4DsenAR3cj3cS5G1oJbpgg9YVncVWHux6jiraPLsvtOGkNfjaF07zx27wTbLXLeEFywLSNnQjPsDzYUf4LyLp6ZcQHlig3Fe1m7UTOXsugPB+qwbIPfViymJxGzTEarUd6WX5n4N0M2n/gXbHvIhaAF2xy5MLRgmyHnNoY5DWRKw3WlDptJWg1CPq7zqChyKWjCfm4o9nFdcZfSa5kTyCbH4sh+Nzk2DPt/t+02BNsasjF0jbGtIpduDHMaSLyAWcaQNOTgUw73pshWMppl9vFDQ2+BIl+qqj7+loMdelTzgc6aYVtFxvgWYACSeU6ptSTspwAAAABJRU5ErkJggg==";

  var posX = 100;
  var posY = 100;
  var changeBy = 0.01;
  var opacity = 0;

  var increment = function() {
      opacity = opacity + changeBy;
      if (opacity >= 1) {
        opacity = 1;
        changeBy = -0.01;
      } else if (opacity <= 0) {
        opacity = 0;
        changeBy = 0.01;
      }
      }
      
      
      
      // set's up the canvas by painting the background onto the canvas, as well as loading the two images into image objects.
      
  var backgroundImage = new Image();
  var fadeImage = new Image();
  var context = document.getElementById("canvas").getContext("2d");

  backgroundImage.onload = function(event) {
    backgroundImage.width = 256;
    backgroundImage.height = 256;
    context.drawImage(backgroundImage, 0, 0, 256, 256);
  }

  backgroundImage.src = backgroundSrc;
  fadeImage.src = fadeSrc;

  // set's up the html images with the appropriate src
  document.getElementById("background").src = backgroundSrc;
  var htmlOverlay = document.getElementById("overlay");
  htmlOverlay.src = fadeSrc;
  htmlOverlay.style.position = "absolute";
  htmlOverlay.style.left = posX + "px";
  htmlOverlay.style.top = posY + "px";
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
css
increment();
htmlOverlay.style.opacity = opacity;
ready
canvas
increment();
context.drawImage(fadeImage, posX, posY, 90, 46);
ready

Revisions

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