incubated-geek-cc · August 28, 2024 04:07
diff --git a/demo.html b/demo.html
 <!DOCTYPE html>
 <html lang='en' class='notranslate' translate='no'>
  <head>
    <meta name='google' content='notranslate' />
    <meta http-equiv='Content-Language' content='en' />
    <meta charset='UTF-8'>
    <style>
        body {
          padding: 5% 15%;
        }
        .emoji {
            font-family:Segoe UI Emoji !important;
        }
        @font-face {
           font-family: EmojiFontWin8;
           src: url(css/fonts/seguiemj-win8.ttf);
        }
        .EmojiFontWin8 {
            font-family:EmojiFontWin8 !important;
        }
    </style>
  </head>
  <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <script>
            var emojiClass='EmojiFontWin8'; // default CSS class
            var icon = '😀';
            var _scale=window.devicePixelRatio*2;
            var w=96, h=96, fontSize,canvas,ctx,_x,_y,faviconTag;

            canvas=document.createElement('canvas');
            document.body.appendChild(canvas);
            canvas.width=w;
            canvas.height=h;
            fontSize = h/_scale;
            canvas['style']['margin']='1px auto';
            canvas['style']['width']=`${w/_scale}px`;
            canvas['style']['height']=`${h/_scale}px`;
            var ctx=canvas.getContext('2d');
            ctx.scale(_scale,_scale);

            ctx.font = `${fontSize}px ${ (emojiClass=='emoji') ? 'Segoe UI Emoji' : emojiClass }`;
            ctx.textAlign = 'center';
            ctx.textBaseline='middle';
            ctx.direction='ltr';
            ctx.globalAlpha=1.0;
            ctx.fontVariantCaps='unicase';
            ctx.fontKerning='auto';
            ctx.fontStretch='normal';
            ctx.filter='none';
            ctx.globalCompositeOperation='source-over';
            ctx.imageSmoothingEnabled=true;
            ctx.imageSmoothingQuality='high';
            ctx.lineCap='butt';
            ctx.lineDashOffset=0;
            ctx.lineJoin='miter';
            ctx.miterLimit=10;
            ctx.shadowBlur=0;
            ctx.shadowColor='rgba(0, 0, 0, 0)';
            ctx.shadowOffsetX=0;
            ctx.shadowOffsetY=0;
            ctx.textRendering='auto';

            _x=((canvas.width/_scale)/2);
            _y=((canvas.height/_scale)/2);
            ctx.fillText(icon, _x, _y);

            const inputIcon = document.createElement('input');
            inputIcon.value=icon;
            document.body.appendChild(inputIcon);
            inputIcon.addEventListener('input', (evt)=> {
              icon=evt.target.value;
              canvas.getContext('2d').clearRect(0, 0,canvas.width,canvas.height);
              canvas.getContext('2d').fillText(icon, _x, _y);
            });

            function triggerEvent(el, type) {
                let e = (('createEvent' in document) ? document.createEvent('HTMLEvents') : document.createEventObject());
                if ('createEvent' in document) {
                    e.initEvent(type, false, true);
                    el.dispatchEvent(e);
                } else {
                    e.eventType = type;
                    el.fireEvent('on' + e.eventType, e);
                }
            }

            (async()=> {
              await new Promise((resolve, reject) => setTimeout(resolve, 500));
              triggerEvent(inputIcon,'input');
            })();
        </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang='en' class='notranslate' translate='no'>
	<head>
	<meta name='google' content='notranslate' />
	<meta http-equiv='Content-Language' content='en' />
	<meta charset='UTF-8'>
	<style>
	body {
	padding: 5% 15%;
	}
	.emoji {
	font-family:Segoe UI Emoji !important;
	}
	@font-face {
	font-family: EmojiFontWin8;
	src: url(css/fonts/seguiemj-win8.ttf);
	}
	.EmojiFontWin8 {
	font-family:EmojiFontWin8 !important;
	}
	</style>
	</head>
	<body>
	<noscript>You need to enable JavaScript to run this app.</noscript>
	<script>
	var emojiClass='EmojiFontWin8'; // default CSS class
	var icon = '😀';
	var _scale=window.devicePixelRatio*2;
	var w=96, h=96, fontSize,canvas,ctx,_x,_y,faviconTag;

	canvas=document.createElement('canvas');
	document.body.appendChild(canvas);
	canvas.width=w;
	canvas.height=h;
	fontSize = h/_scale;
	canvas['style']['margin']='1px auto';
	canvas['style']['width']=`${w/_scale}px`;
	canvas['style']['height']=`${h/_scale}px`;
	var ctx=canvas.getContext('2d');
	ctx.scale(_scale,_scale);

	ctx.font = `${fontSize}px ${ (emojiClass=='emoji') ? 'Segoe UI Emoji' : emojiClass }`;
	ctx.textAlign = 'center';
	ctx.textBaseline='middle';
	ctx.direction='ltr';
	ctx.globalAlpha=1.0;
	ctx.fontVariantCaps='unicase';
	ctx.fontKerning='auto';
	ctx.fontStretch='normal';
	ctx.filter='none';
	ctx.globalCompositeOperation='source-over';
	ctx.imageSmoothingEnabled=true;
	ctx.imageSmoothingQuality='high';
	ctx.lineCap='butt';
	ctx.lineDashOffset=0;
	ctx.lineJoin='miter';
	ctx.miterLimit=10;
	ctx.shadowBlur=0;
	ctx.shadowColor='rgba(0, 0, 0, 0)';
	ctx.shadowOffsetX=0;
	ctx.shadowOffsetY=0;
	ctx.textRendering='auto';

	_x=((canvas.width/_scale)/2);
	_y=((canvas.height/_scale)/2);
	ctx.fillText(icon, _x, _y);

	const inputIcon = document.createElement('input');
	inputIcon.value=icon;
	document.body.appendChild(inputIcon);
	inputIcon.addEventListener('input', (evt)=> {
	icon=evt.target.value;
	canvas.getContext('2d').clearRect(0, 0,canvas.width,canvas.height);
	canvas.getContext('2d').fillText(icon, _x, _y);
	});

	function triggerEvent(el, type) {
	let e = (('createEvent' in document) ? document.createEvent('HTMLEvents') : document.createEventObject());
	if ('createEvent' in document) {
	e.initEvent(type, false, true);
	el.dispatchEvent(e);
	} else {
	e.eventType = type;
	el.fireEvent('on' + e.eventType, e);
	}
	}

	(async()=> {
	await new Promise((resolve, reject) => setTimeout(resolve, 500));
	triggerEvent(inputIcon,'input');
	})();
	</script>
	</body>
	</html>