Javascript Canvas, как увеличить изображение

Question

Я использую функцию scale () с canvas, но я не уверен, как она работает, потому что, похоже, она работает не так, как можно было бы предположить. Я просто хочу увеличить изображение в два раза.

const imageData = tempcanv.getContext('2d').getImageData(0, 0, tempcanv.width, tempcanv.height);
const canvas2 = document.createElement("canvas");
const ctx2 = canvas2.getContext('2d');
canvas2.width = tempcanv.width * 2, canvas2.height = tempcanv.height * 2;
ctx2.scale(2, 2);
ctx2.putImageData(imageData, 0, 0);

Это просто делает изображение внутри большего холста, но сам размер изображения не изменился. Разве это не то, что должен делать scale (), или я делаю что-то еще неправильно?

Answer 1

Использование putImageData не влияет на текущие преобразования на холсте - в вашем случае scale не будет иметь никакого эффекта.

Вместо этого вы можете использовать функцию drawImage для рисования вашего временного холста на другом холсте в желаемом масштабе, например ::10000

...
// Syntax: ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx2.drawImage(tempcanv, 0, 0, tempcanv.width * 2, tempcanv.height * 2);
...

---

Вот базовый пример рисования одного холста на другом.

var canv1 = document.getElementById('canvas1');
var canv2 = document.getElementById('canvas2');
// Draw a rect on our source canvas as an example image
canv1.getContext('2d').fillRect(1, 1, 40, 40);
// Draw our first canvas onto our second at 2x
canv2.getContext('2d').drawImage(canv1, 0, 0, canv1.width * 2, canv1.height * 2);

<div>
  <canvas id="canvas1" width="100" height="100"></canvas>
</div>
<div>
  <canvas id="canvas2" width="200" height="200"></canvas>
</div>