Загрузка Base64 PNG изображения на HTML5 canvas: решение

const canvas = document.getElementById('canvasId');
const context = canvas.getContext('2d');
const img = new Image();
img.onload = () => context.drawImage(img, 0, 0);
img.src = 'data:image/png;base64,...'; // Вставьте здесь вашу строку в формате Base64.

// Ваша строка Base64 должна быть безупречной.
// Как узнать её корректность? Она начинается с `data:image/png;base64,`
// и не содержит пробелов или других проблемных символов.

const img = new Image();
img.onerror = (e) => { /* Корректная обработка ошибок. */
  console.error('Ошибка при загрузке изображения в формате Base64:', e);
};

const ctx = document.getElementById('canvasId').getContext('2d');
// Лучше всего начать с чистого листа, поэтому очистим холст.
ctx.clearRect(0, 0, canvas.width, canvas.height);

canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
// Качественный код — это искусство.

<canvas id="artCanvas"></canvas> <!-- Холст — это ваше полотно для творчества. -->

const ctx = document.getElementById('artCanvas').getContext('2d');
const image = new Image();
image.onload = () => ctx.drawImage(image, 0, 0);
image.src = 'data:image/png;base64,...'; // И вот, ваше изображение готово к отображению!

До: [📒] (Пустой холст)
После: [📒🖼️] (Заполненный холст)

// Боитесь испытать проблемы с CORS при использовании изображений Base64 из внешних источников? Будьте внимательны.
// Большие строки Base64 требуют особого внимания. Не забывайте очищать память, присваивая img.src пустое значение после использования.
// Контролируйте расположение на холсте. Функция drawImage() позволяет управлять размером и масштабом изображения.
// Не забывайте об доступности холста. Альтернативный текст и описания – ваши лучшие помощники.

// Ваш холст слишком динамичен? Не хочет оставаться на месте?
// Сделайте глубокий вздох и...
// Адаптируйте размеры холста при изменении размеров окна браузера.

window.addEventListener('resize', resizeCanvas);
function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // Продолжайте творить, как советовала Дори.
}

// Уделите внимание пропорциям ваших изображений, чтобы они всегда выглядели идеально.