User:Fumple/SplatoonTextGenerator.js: Difference between revisions
From Inkipedia, the Splatoon wiki
m (Fixed canvas width) |
m (Fumple moved page MediaWiki:Common.js/User:Fumple/SplatoonTextGenerator.js to User:Fumple/SplatoonTextGenerator.js without leaving a redirect: Archived) |
(No difference)
|
Latest revision as of 18:47, 7 September 2022
//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); }); });