User:Fumple/SplatoonTextGenerator.js
From Inkipedia, the Splatoon wiki
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); }); });