Real-time recompilation of running JS, live demo

' Note: this is a very crude demo of realtime recompilation of running JS '
' You can edit this code, change values, and see the update live, without reloading or resetting the animation '
' There are limits. For one, the parser is old and only accepts old ES6 code (no new syntax, no TypeScript) '
' The transform is not completely sound. There are no visual clues that an error happened or why. Use devtools for that. '
' By Peter van der Zee, © https://pvdz.ee , May 2013 '
' JSConf 2013 talk: https://www.youtube.com/watch?v=9HfWmdp9_I0 '
' Fronteers 2013 talk: https://fronteers.nl/congres/2013/sessions/real-time-recompilation '

console.warn("code (re)started");

function run(){
  var counter = 0;
  setInterval(function(){
    ++counter;

var c = canvas.getContext('2d');
    c.clearRect(0,0,canvas.width,canvas.height);
    c.fillStyle = 'black';
    c.fillRect(125,125,250,250);

c.save();
    c.translate(500,400);
    c.rotate(-(counter+50%314)/10);
    c.fillStyle = 'green';
    c.fillRect(-50, -50, 100, 100);
    c.restore();

var gradient = c.createLinearGradient(0,0,0,200);
    gradient.addColorStop(0, 'yellow');
    gradient.addColorStop(0.5, 'red');

c.save();
    c.translate(250,250);
    c.rotate((counter%314)/25);
    c.fillStyle = gradient;
    c.fillRect(-100,-100,200,200);
    c.rotate((counter+50%314)/25);
    c.fillStyle = 'blue';
    c.fillRect(-90,-90,180,180);
    c.restore();

for (var i=0; i<2; ++i) {
      c.save();
      c.translate(75+i*150,75);
      c.rotate((counter+50%314)/10);
      c.fillStyle = 'red';
      c.fillRect(-50, -50, 100, 100);
      c.restore();
    }

}, 50);
}

run();