JSFiddle - React, Tailwind, and code Playground

JavaScript

/*  
attempting to hook toDataURL() so that each time the function is called 
 I console.log() the resulting URI 
 */

  
 
// from Dans.blog
// ==> hook on alert, can't modify to hook on toDataURL
(function (w){
  var alert_old = w.alert;

  w.alert = function (){
    var name = prompt("Enter your name");
    alert_old.apply(this, [name]);
  }
})(window || {});

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~//

// from https://stackoverflow.com/questions/11727759/hooking-document-createelement-using-function-prototype
// hook on the creation of a canvas element 
// ==> lacks the finished object, so does not help
document.createElement = function(create) {
    return function() {
        var ret = create.apply(this, arguments);
        if (ret.tagName.toLowerCase() === "canvas") {
            document.write("initial, blank canvas: ", ret.toDataURL());
        }
        return ret;
    };
}(document.createElement)

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~//

// see http://jsfiddle.net/af1pL6fb/5/
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var txt = 'i9asdm..$#po((^@KbXrww!~cz';
ctx.textBaseline = "top";
ctx.font = "16px 'Arial'";
ctx.textBaseline = "alphabetic";
ctx.rotate(.05);
ctx.fillStyle = "#f60";
ctx.fillRect(125,1,62,20);
ctx.fillStyle = "#069";
ctx.fillText(txt, 2, 15);
ctx.fillStyle = "rgba(102, 200, 0, 0.7)";
ctx.fillText(txt, 4, 17);
ctx.shadowBlur=10;
ctx.shadowColor="blue";
ctx.fillRect(-20,10,234,5);
var strng=canvas.toDataURL();

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~//

document.write("\n finished canvas: ", strng);
document.body.appendChild(canvas);