OffscreenCanvas Example 01

Copy

import BouncingBalls from './utils/bouncing-balls';

var windowCanvas = document.getElementById('canvas-window');
var workerCanvas = document.getElementById('canvas-worker');
var offscreen = workerCanvas.transferControlToOffscreen();

new BouncingBalls(windowCanvas, {radius: 2, size: 50});

var worker = new Worker('data/worker/offscreen-canvas-ex01.js');
worker.postMessage({canvas: offscreen, type: 'canvas'}, [offscreen]);

function sleep(delay) {
  var start = new Date().getTime();
  console.log('Sleeping!');
  while (new Date().getTime() < start + delay) { ; }
}

var key;

document.getElementById('canvas-window-check').addEventListener('change', function (e) {
  if (key || !e.target.checked) {
    clearInterval(key);
  }

if (e.target.checked) {
    key = setInterval(function () {
      sleep(1000);
    }, 3000);
  }
});

document.getElementById('canvas-worker-check').addEventListener('change', function (e) {
  worker.postMessage({busy: e.target.checked, type: 'busy'});
});

var count = 0;
var countSpan = document.getElementById('interaction-count');
document.getElementById('interaction-btn').addEventListener('click', function () {
  countSpan.innerHTML = (++count).toString();
});

<!DOCTYPE html>
<html>
  <head>
    <title>OffscreenCanvas Example 01</title>
    <link rel="stylesheet" href="http://www.3daysofprogramming.com/playground/pg.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Map,Set,Promise"></script>
    <script src="http://www.3daysofprogramming.com/playground/examples/resources/js/stats.js"></script>
    <style>
      #container {
        position: relative;
        display: flex;
        justify-content: space-evenly;
      }

      .canvas-box {
        display: inline-block;
        background-color: #ffffff;
        padding: 10px;
      }

      .canvas-box h2 {
        border-bottom: 1px solid #d3d3d3;
        text-align: center;
      }

      #canvas-window {
        width: 300px;
        height: 300px;
      }

      #canvas-worker {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div id="container" class="main">
      <div class="canvas-box">
        <h2>Canvas on main thread</h2>
        <canvas id="canvas-window">
        </canvas>
      </div>

      <div class="canvas-box">
        <h2>Canvas on worker Thread</h2>
        <canvas id="canvas-worker">
        </canvas>
      </div>
    </div>

    <button id="interaction-btn">Interaction Count : <span id="interaction-count">0</span></button>
    <br/>
    <input type="checkbox" id="canvas-window-check"><label for="canvas-window-check">Turn on busy with Canvas Window</label>
    <br/>
    <input type="checkbox" id="canvas-worker-check"><label for="canvas-worker-check">Turn on busy with Canvas Worker</label>
    <script>
      import BouncingBalls from './utils/bouncing-balls';

      var windowCanvas = document.getElementById('canvas-window');
      var workerCanvas = document.getElementById('canvas-worker');
      var offscreen = workerCanvas.transferControlToOffscreen();

      new BouncingBalls(windowCanvas, {radius: 2, size: 50});

      var worker = new Worker('data/worker/offscreen-canvas-ex01.js');
      worker.postMessage({canvas: offscreen, type: 'canvas'}, [offscreen]);

      function sleep(delay) {
        var start = new Date().getTime();
        console.log('Sleeping!');
        while (new Date().getTime() < start + delay) { ; }
      }

      var key;

      document.getElementById('canvas-window-check').addEventListener('change', function (e) {
        if (key || !e.target.checked) {
          clearInterval(key);
        }

        if (e.target.checked) {
          key = setInterval(function () {
            sleep(1000);
          }, 3000);
        }
      });

      document.getElementById('canvas-worker-check').addEventListener('change', function (e) {
        worker.postMessage({busy: e.target.checked, type: 'busy'});
      });

      var count = 0;
      var countSpan = document.getElementById('interaction-count');
      document.getElementById('interaction-btn').addEventListener('click', function () {
        countSpan.innerHTML = (++count).toString();
      });
    </script>
  </body>
</html>