Изображение, созданное на холсте, имеет черный фон (HTML5)

Ваше экспортированное изображение из элемента canvas — черный фон с методом toDataURL ()? Действительно раздражающая проблема не?

HTMLCanvasElement.toDataURL() Метод возвращает URI данных, содержащие представление изображения в формате, заданном параметром типа (по умолчанию PNG).

Черный фон изображения вызван неправильным форматом экспорта. Если у вас есть эта проблема, вы, вероятно, экспортируете изображение следующим образом:

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

Обычно вы пропускаете первый параметр (Формат), поскольку он всегда будет PNG, но если вы явно укажете формат и ваше изображение будет прозрачным, вы столкнетесь с этой проблемой.

Чтобы устранить эту ошибку, измените (или пропустите) первый параметр из image/jpeg в image/png,

var Image = canvas.toDataURL("image/png");
// Or without parameter because the default exporting format is PNG
var Image = canvas.toDataURL();

Почему изображение нужно экспортировать в формате PNG?

Просто потому, что если ваш холст имеет прозрачный фон, а экспортированный формат — JPG, будет невозможно создать прозрачность для формата JPG, потому что только формат PNG поддерживает прозрачность.