Почему содержимое моего клонированного элемента HTML5 canvas отображается в виде сплошного черного фона?

Question

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

Я создал новый меньший пустой элемент canvasзаранее и добавили его в DOM с определенной высотой / шириной.

Идея состояла в том, чтобы клонировать большой элемент canvas в меньший после загрузки страницы, используя:

//grab the context from your destination canvas
const destCtx = destinationCanvas.getContext('2d');

//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);

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

Я немного осмотрелся, но не нашел рабочего решения этой проблемы, так какпока.

Небольшой набросок того, что я пытаюсь сделать:

Также попробовал следующее:

const smallCanvas = document.getElementById('smallCanvas'); 
const bigCanvas = document.getElementById('bigCanvas'); 

smallCanvas.getContext('2d').drawImage(bigCanvas, 0, 0, bigCanvas.width, bigCanvas.height, 0, 0, smallCanvas.width, smallCanvas.height);

Результат всегда выглядит так:

Answer 1

Это происходит потому, что вы не передали никаких параметров методу drawImage () , кроме источника и позиции. В этом случае он нарисует изображение 1: 1 на меньшем холсте - это означает, что вы просто видите часть исходного холста вплоть до размеров маленького холста.

Чтобы исправить это, вам нужно указать два прямоугольника (x, y, width, height): первый - это значения от большего, а второй от меньшего. например drawImage(source,sourceX,sourceY,sourceWidth,sourceHeight,targetX,targetY,targetWidth,targetHeight);

Вот пример:

var bigCanvas = document.getElementById("bigCanvas");
var smallCanvas = document.getElementById("smallCanvas");
var img = new Image();
img.onload = function() {
  bigCanvas.getContext('2d').drawImage(this, 0, 0);
  smallCanvas.getContext('2d').drawImage(bigCanvas, 0, 0, bigCanvas.width, bigCanvas.height, 0, 0, smallCanvas.width, smallCanvas.height);
}
img.src = "https://picsum.photos/id/16/400/300";

<canvas id="bigCanvas" width="400" height="300"></canvas>
<canvas id="smallCanvas" width="40" height="30"></canvas>