User:Fumple/SplatoonTextGenerator.js

//Code taken from Stack Overflow and then modified for by FunPL $("#ineedjavascript").html(`  Font:  Splatoon Splatoon 2 Text color:  White Black  `) var tCtx = $('#textCanvas')[0].getContext('2d'), imageElem = document.getElementById('image');

var font = '400 50px "Splatoon"'; var font2 = '400 50px "Splatoon2"';

document.fonts.load(font) .then(function {   document.fonts.load(font2)    .then(function { document.getElementById('text').addEventListener('keyup', function {           // Set it before getting the size            tCtx.font = font            // this will reset all our context's properties            tCtx.canvas.width = tCtx.measureText(this.value).width;            // so we need to set it again            tCtx.font = $("#font")[0].value == "Splatoon" ? font : font2;            // set the color only now            tCtx.fillStyle = $("#color")[0].value;            tCtx.fillText(this.value, 0, 50);            imageElem.src = tCtx.canvas.toDataURL;        }, false); }); });