JSFiddle - React, Tailwind, and code Playground

by simonsarris

HTML

We're drawing a green rect, waiting, then clearing, doing something that takes a long time and finally drawing a blue rect. During the "long time" you won't see a cleared screen because the canvas is double buffering for you.
<canvas id="canvas1" width="500" height="500" style="border: 1px solid black;"></canvas>

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(50,50,50,50);


setTimeout(function() {
ctx.fillStyle = 'blue';
    
    
// Clear the canvas
ctx.clearRect(0,0,500,500);
var g = 1;
// Do something that takes a long time
for (var i = 0; i < 99999999; i++) {
    g += Math.sqrt(g);
}

// Okay finally draw the blue rectangle
ctx.fillRect(50,50,50,50);
}, 200);