<div>
  <canvas
    id="myCanvas"
    height="150"
    width="150"
  ></canvas>
</div>
<div>
  <button type="button" id="make-busy">
  Hit the main thread!
</button>
  <div id="busy">&nbsp;</div>
</div>
var mainCanvas = document.getElementById("myCanvas");
var mainContext = mainCanvas.getContext("2d");

var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;

var angle = 0;

var requestAnimationFrame =
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame;

function drawCircle() {
  mainContext.clearRect(0, 0, canvasWidth, canvasHeight);

  // color in the background
  mainContext.fillStyle = "#EEEEEE";
  mainContext.fillRect(0, 0, canvasWidth, canvasHeight);

  // draw the circle
  mainContext.beginPath();

  var radius = 25 + 20 * Math.abs(Math.cos(angle));
  mainContext.arc(70, 70, radius, 0, Math.PI * 2, false);
  mainContext.closePath();

  // color in the circle
  mainContext.fillStyle = "#006699";
  mainContext.fill();

  angle += Math.PI / 64;

  requestAnimationFrame(drawCircle);
}

drawCircle();

function fibonacci(num) {
  if (num <= 1) return 1;

  return fibonacci(num - 1) + fibonacci(num - 2);
}

document.querySelector("#make-busy").addEventListener("click", () => {
  document.querySelector("#busy").innerText = "Main thread working...";
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      fibonacci(40);
      document.querySelector("#busy").innerText = "Done!";
    });
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.