JSFiddle - React, Tailwind, and code Playground

by Rui Leite

HTML

<p><output></output> >> Canvas</p>
<p><img id="imagem" /> >> Elemento &lt;img /&gt;</p>
<p><a id="botao" download="montagem.png">Download do resultado</a></p>

JavaScript

// Capturando os elementos HTML estáticos:
var img_out = document.getElementById("imagem"); // provavelmente a saída de imagem que você quer utilizar.
var output = document.getElementsByTagName("output")[0]; // para pré-visualização do resultado.
var botao = document.getElementById("botao"); // botao para download do resultado.

// Inicializando o canvas:
var canvas = document.createElement("canvas");
canvas.width = 201;
canvas.height = 40;
var context = canvas.getContext("2d");

// Uma vez que as imagens deste exemplo são brancas, precisaremos de fundo preto para vê-las:
context.fillStyle = "#000000";
context.fillRect(0, 0, canvas.width, canvas.height);

// Carregamento das imagens dinâmicas*. Ver ASTERISCO (importante):
var img_in1 = document.createElement("img");
var img_in2 = document.createElement("img");
img_in1.addEventListener("load", function(){
    context.drawImage(img_in1
                     , 0, 0, img_in1.width, img_in1.height
                     , 0, 0, img_in1.width, img_in1.height
                     );
    img_in2.src = "http://fiddle.jshell.net/img/logo-white.png";
});
img_in2.addEventListener("load", function(){
    context.drawImage( img_in2
                     , 0, 0, img_in2.width, img_in2.height
                     , img_in1.width + 10, 0, img_in2.width, img_in2.height
                     );
    
    // Para que as linhas abaixo funcionem, é necessário que as imagens
    // dinâmicas provenham do seu próprio domínio* (ver ASTERISCO):
    img_out.src = canvas.toDataURL("image/png");
    botao.href = canvas.toDataURL("image/png");
});
img_in1.src = "http://fiddle.jshell.net/img/logo.png";

// Para pré-visualização do resultado no canvas*, apenas:
output.appendChild(canvas);

// * O canvas nunca terá problemas em exibir o resultado.
//   Porém, se as imagens NÃO PROVÉM do mesmo domínio da página, nunca serão
//   exibidas corretamente em uma tag <img> (por restrição de segurança), e nunca
//   poderão ser baixadas, pois o método...