JSFiddle - React, Tailwind, and code Playground

by simonsarris

HTML

<p>Smooth zooming of text is not possible in at least Chrome and FF for windows.</p>
<p>(Surprisingly fine in IE10!)</p>
<canvas id="canvas1" width="400" height="400"></canvas>

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

// lazy shim
(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||                          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

function cb() {
    ctx.clearRect(0,0,500,500);
    ctx.scale(1.0006, 1.0006);
    ctx.fillText("Whispering Madness", 10, 12);
    requestAnimationFrame(cb);
}

requestAnimationFrame(cb);