Рисование изображения в холсте удаляет фон Fll

Question

Прежде чем экспортировать изображение с моего холста, я создаю новый холст, где я делаю некоторые манипуляции (обрезка и т. Д.). В этом новом холсте я заполняю фон до синего, чтобы при экспорте изображения фон был синим. Однако, когда я помещаю рисунок из первого холста, он делает части фона прозрачными. Как это исправить?

Вот рисунок с первого холста:

Вот что я хочу:

Но я получаю следующее:

Вот моя часть моего кода:

//Create Copy of Canvas 
var copyOfContext = document.createElement('canvas').getContext('2d'); 
copyOfContext.canvas.width = c.width; 
copyOfContext.canvas.height = c.height; 
copyOfContext.fillStyle = "yellow"; 
copyOfContext.fillRect(0, 0, c.width, c.height); 
copyOfContext.putImageData(trimmedRect, 0, 0); 

croppedImageURL = copyOfContext.canvas.toDataURL("image/png"); 

Edit: Причина, почему я не делаю это в моем первом холсте Ьс У меня есть конкретный вид для этого, чтобы соответствовать веб-страницы, поэтому я использую второй холст, чтобы получить результат и цвет, который я хочу. :)

Answer 1

Для копирования из холста в холст используйте только drawImage.

Демонстрация показывает, как это делается.

var can1 = document.createElement("canvas"); 
 
var can2 = document.createElement("canvas"); 
 
can1.width = can2.width = 200; 
 
can1.height = can2.height = 200; 
 
can1.ctx = can1.getContext("2d"); 
 
can2.ctx = can2.getContext("2d"); 
 
can1.ctx.fillStyle = "yellow"; 
 
can1.ctx.fillRect(0,0,200,200); 
 
can2.ctx.strokeStyle = "black"; 
 
can2.ctx.lineWidth = 5; 
 
can2.ctx.strokeRect(40,40,120,120); 
 
document.body.appendChild(can1); 
 
document.body.appendChild(can2); 
 

 
can1.ctx.drawImage(can2,30,30,140,140,30,30,140,140);