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
*/
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~//
// Below the Radar's solution ==> thanks!!
// successfully logs the call, but where is the URI
var toDataURL = HTMLCanvasElement.prototype.toDataURL;
HTMLCanvasElement.prototype.toDataURL = function(type, encoderOptions) {
console.log("toDataURL was called <-- successful log, but see this ==> ", type, encoderOptions);
toDataURL.call(this, type, encoderOptions);
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~//
// 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 =...