<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"> </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!";
});
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.