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"';

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

document.fonts.load(font) .then(function {   document.fonts.load(font2)    .then(function { $('#text').on('keyup', fumpleRefreshCanvasTextGen); $('#font, #color').change(fumpleRefreshCanvasTextGen); }); });