Generar imagen con texto desde javascript

Utilizando canvas este escript solicita una imagen base y un texto y genera una nueva imagen con el texto incrustado a la que el usuario podrá darle clic derecho y guardar en su computadora.

by ksbarrientosn

HTML

<form id="formulario">
  <div>
    <label>Imagen base</label>
    <input id="imagen-base" type="file" accept="image/png, image/jpeg" />
    <img id="imagen-base-placeholder" style="display:none" />
  </div>
  <div>
    <label>Texto</label>
    <input id="texto" type="text" />
  </div>
  <div>
    <button type="submit">Generar</button>
  </div>
</form>

<div>
  <h2>Imagen cargada</h2>
  <img id="imagen-final" />
</div>

<div style="display:none">
  <h2>Canvas</h2>
  <canvas id="generador"></canvas>
</div>

JavaScript

var formulario = document.getElementById('formulario');
var imagenBase = document.getElementById('imagen-base');
var imagenBasePlaceholder = document.getElementById('imagen-base-placeholder');
var texto = document.getElementById('texto');
var imagenFinal = document.getElementById('imagen-final');
var generador = document.getElementById('generador');

formulario.addEventListener('submit', onSubmit);

function onSubmit(e) {
  e.preventDefault();
  if (!imagenBase.files && !imagenBase.files[0]) {
    return;
  }

  var reader = new FileReader();
  reader.onload = function(e) {
    imagenBasePlaceholder.setAttribute('src', e.target.result);
    imagenBasePlaceholder.onload = function() {
      generarCanvas(imagenBasePlaceholder);
      imagenFinal.setAttribute('src', generador.toDataURL("image/png"));
    }
  };
  reader.readAsDataURL(imagenBase.	files[0]);
}

function generarCanvas(img) {

  var context = generador.getContext("2d");
  context.drawImage(img, 10, 10);
  context.font = "40pt Calibri";
  context.fillText(texto.value, 20, 20);
}