ImageData manipulation vs ctx.drawImage()

Benchmark created by Kamil Trebunia on


Preparation HTML

<style>
                canvas { background: transparent; }
                img { background-color: rgba(255, 0, 0, 0.5); }
        </style>

    <img src='data:image/png;base64,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'/>

    <canvas></canvas>
    <canvas></canvas>
<script>
  
      var _canvas = document.createElement("canvas");
      var _ctx = _canvas.getContext("2d");
  
      var getImageData = function (image) {
  
              _canvas.width = image.width;
              _canvas.height = image.height;
  
              _ctx.drawImage(image, 0, 0);
  
              return _ctx.getImageData(0, 0, image.width, image.height);
  
          };
  
      var drawImage = function (dstData, srcData) {
  
              var src  = srcData.data;
              var dst  = dstData.data;
  
              var srcDataHeight = srcData.height;
              var srcDataWidth = srcData.width;
              var dstDataHeight = dstData.width;
  
              var srcA, dstA, resultA, nSrcA;
              var srcR, srcG, srcB, dstR, dstG, dstB;
              var srcIndex, dstIndex;
  
              for (var i = 0; i < srcDataHeight; i += 1) {
                  for (var j = 0; j < srcDataWidth; j += 1) {
  
                      srcIndex = (i * srcDataWidth + j) * 4;
                      dstIndex = (i * dstDataHeight + j) * 4;
  
                      srcA = src[srcIndex + 3] / 255;
                      dstA = dst[dstIndex + 3] / 255;
  
                      srcR = src[srcIndex    ] * srcA;
                      dstR = dst[dstIndex    ] * dstA;
                      srcG = src[srcIndex + 1] * srcA;
                      dstG = dst[dstIndex + 1] * dstA;
                      srcB = src[srcIndex + 2] * srcA;
                      dstB = dst[dstIndex + 2] * dstA;
  
                      nSrcA = 1 - srcA
  
                      resultA = srcA + dstA * nSrcA;
  
                      dst[dstIndex    ] = (srcR + dstR * nSrcA) / resultA;
                      dst[dstIndex + 1] = (srcG + dstG * nSrcA) / resultA;
                      dst[dstIndex + 2] = (srcB + dstB * nSrcA) / resultA;
                      dst[dstIndex + 3] = resultA * 255;
  
                  }
              }
  
              return dstData;
  
          };
  
  
          var image = document.querySelector("img");
          var srcData = getImageData(image);
  
          var canvas1 = document.querySelectorAll("canvas")[0];
          var canvas2 = document.querySelectorAll("canvas")[1];
          var ctx1 = canvas1.getContext("2d");
          var ctx2 = canvas2.getContext("2d");
          canvas1.height = canvas2.height = image.height;
          canvas1.width = canvas2.width = image.width;
          ctx1.fillStyle = "rgba(255, 0, 0, 0.5)";
          ctx2.fillStyle = "rgba(255, 0, 0, 0.5)";
          ctx1.fillRect(0, 0, canvas1.width, canvas1.height);
          ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
  
          var i, start;
  
          var dstData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
  
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
ImageData manipulation (with blending)
dstData = drawImage(dstData, srcData);
ready
ctx.drawImage()
ctx2.drawImage(image, 0, 0);
ready

Revisions

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

  • Revision 1: published by Kamil Trebunia on