User:Fumple/SplatoonTextGenerator.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

//Code taken from [https://stackoverflow.com/a/52866146 Stack Overflow] and then modified for by [[User:FunPL|FunPL]]
$("#ineedjavascript").html(`<canvas style='display:none' id='textCanvas' height=65></canvas>
<img style="background:url('//cdn.wikimg.net/en/splatoonwiki/images/d/d4/S2_background_stripe_pattern.svg');border:2px solid #AADC00;border-radius:20px;padding:10px" id='image'>
<br>
Font: <select id='font'>
<option value="Splatoon">Splatoon</option>
<option value="Splatoon2">Splatoon 2</option>
</select><br>
Text color: <select id='color'>
<option value="#FFF">White</option>
<option value="#000">Black</option>
</select><br>
<textarea id='text'></textarea>`)
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").val() == "Splatoon" ? font : font2;
    // this will reset all our context's properties
    tCtx.canvas.width = tCtx.measureText($("#text").val()).width;
    // set again for some reason
    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);
    });
});