Как заставить putImageData покрыть весь холст

Question

Я использую getImageData с холста и отображаю его на другом холсте, используя putImageData. Но он не покрывает весь холст. Он отображает изображение в его оригинальном размере. Есть способ сделать обрезанное изображение полностью покрывающим холст. Заранее спасибо. Размеры обоих полотен - 300 на 300.

var c =  document.getElementById("area_c");
var c2 =  document.getElementById("area_c2");

var ctx = c.getContext("2d");
var ctx2 = c2.getContext("2d");

var imgData = ctx.getImageData(tx,new_ty ,x, new_y);
ctx2.putImageData(imgData, 0, 0);

Answer 1

В этом фрагменте вы можете увидеть, как масштабировать другой холст с помощью css (я использовал строку вместо изображения, чтобы избежать CORS)

Я также добавил класс, если вы хотите использовать ближайший сосед или пикселизированный

var c =  document.getElementById("area_c");
var c2 =  document.getElementById("area_c2");

var ctx = c.getContext("2d");
var ctx2 = c2.getContext("2d");

var w = 150;
var h = 70;

c.width = w;
c.height = h;

ctx.font = "50px Arial";
ctx.fillText('Image',0,50);

var x = 5;
var y = 15;

var cw = 60;
var ch = 35;

c2.width = cw;
c2.height = ch;

var scale = 2;

c2.style.width = scale*cw+'px';
c2.style.height = scale*ch+'px';

var imgData = ctx.getImageData(x,y,cw,ch);
ctx2.putImageData(imgData, 0, 0);

document.querySelector('input[name=pixelate]').addEventListener('change',()=>{c2.classList.toggle('pixelate')});

canvas {
  border: 1px solid #333;
}
.pixelate {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

<canvas id="area_c"></canvas>
<canvas id="area_c2"></canvas>
<input name="pixelate" type="checkbox"><label for="pixelate">Pixelate</label>