Dibujar emojis en canvas html5

Miscmo codigo de emoji pot distintos navegadores:

Primero lo básico como graficar emojis en un canvas html

Podemos generar el elemento canvas directamente mediante HTML o tenerlo en memoria mediante Javascript sin necesidad de mostrarlo en pantalla

HTML

<canvas id="emojis" class="img-fluid" width="1220" height="620"></canvas>
<p><b>Imagen descargable:</b><img class="img-fluid" id="descargable" />

Se agrego la clase img-fluid para que se visualice bien en esta pagina, pero puede ser omitido

Javascript

<script src="https://albertobsd.dev/js/emoji.js"></script>
<script>
function dibujar_emojis(){
	var descargable= document.getElementById("descargable");
	var canvas_emojis = document.getElementById("emojis");
	var contex = canvas_emojis.getContext("2d");
	contex.save();
	contex.fillStyle = "#FFFFFF";
	contex.fillRect(0, 0, 1220, 620);
	contex.restore();
	contex.font = '20px serif'
	contex.textAlign = "center"; 
	contex.textBaseline = "middle"; 
	var i = 0, j = 0,c = 0, max = emoji.length;
	while(i < 60)	{
		j= 0;
		while(j < 30)	{
			if(c < max){
				contex.fillText(emoji[c], 20 + (i*20), 20+(j*20));
			}
			j++
			c++;
		}
		i++;
	}
	descargable.src = canvas_emojis.toDataURL("image/png",1);
}</script>

También de muestra en una elemento imagen ya que algunos móviles no permiten descargar la imagen directamente desde el canvas

Para probar el código se encuentra el siguiente botón:

Canvas descargable:

Imagen descargable:

Si se quiere ver las imágenes obtenidas por algunos Navegadores se dejara un enlace a la image, todos Muestran algunas diferencias las mas notorias son entre dispositivos Android, contra navegador Chrome y también contra navegador Internet Explorer

Saludos!