JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<p id="shadow">Redraw using shadows</p>
<canvas id="myCanvas1" width="220" height="120"></canvas>
<br/>
<p id="cache">Redraw using a cached image</p>
<canvas id="myCanvas2" width="220" height="120"></canvas>

CSS

body {
          margin: 0px;
          padding: 20px;
      }
      canvas {
          border: 1px solid red;
          margin:10px;
      }

JavaScript

var canvas1 = document.getElementById('myCanvas1');
          var context1 = canvas1.getContext('2d');
          var canvas2 = document.getElementById('myCanvas2');
          var context2 = canvas2.getContext('2d');

          // create a cache image of the shadowed rectangle
          draw1();
          var image = new Image();
          image.src = canvas1.toDataURL();

          var t1 = new Date().getTime();
          for (var i = 0; i < 200; i++) {
              draw1();
          }
          var t2 = new Date().getTime();
          for (var i = 0; i < 200; i++) {
              draw2();
          }
          var t3 = new Date().getTime();
          $("#shadow").text("Redraw using shadows took " + (t2 - t1) + " ms");
          $("#cache").text("Redraw using cached image took " + (t3 - t2) + " ms");

          function draw1() {
              context1.clearRect(0, 0, 220, 120);
              canvas1.width = 220;
              canvas1.height = 120;
              context1.rect(10, 10, 200, 100);
              context1.fillStyle = 'red';
              context1.shadowColor = 'black';
              context1.shadowBlur = 10;
              context1.shadowOffsetX = 5;
              context1.shadowOffsetY = 5;
              context1.fill();
          }

          function draw2() {
              context2.clearRect(0, 0, 220, 120);
              context2.drawImage(image, 0, 0);
          }