Imágen exportada de un canvas tiene un fondo negro en Javascript (HTML5)

Si la imágen de un tag canvas al ser exportada en formato base64 usando el método toDataURL tiene un fondo negro y buscas una solución (quizá tambien para aprender la causa), estás en el lugar correcto.

El método canvas.toDataURL retorna un esquema data URI que contiene la representación de una imagen en una cadena de texto en base64 en el formato especificado en el primer parámetro de la función. En caso de que el primer parámetro no sea especificado, se usará el formato PNG como predeterminado.

El problema

Este problema surge cuando un canvas con transparencia, cuyo formato normal y correcto para exportación a imágen es PNG, es exportado incorrectamente usando el formato JPG/JPEG.

Así que básicamente, este error es provocado por la manera en la que exportas la imagen pues probablemente estás usando "image/jpeg" como primer argumento en la función :

var Imagen = canvas.toDataURL("image/jpeg");

Solución

Para evitar este problema, al exportar, simplemente omite el primer argumento o especifíca el formato PNG :

var Imagen = canvas.toDataURL("image/png");
// O simplemente omite el primer parametro, pues PNG se usa como predeterminado
var Imagen = canvas.toDataURL();

Que te diviertas !