изменить размер холста и дублировать измененный размер содержимого внутри другого

Question

Как я могу продублировать содержимое измененного размера холста внутри другого?

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

html:

<img id="image" src="the-image.png" width="275" height="95"/>
<canvas id="canvas-image" width="275" height="95"></canvas>
<canvas id="canvas-little" width="138" height="48"></canvas>

js:

var img = $('image');   

var cnvImage = $('canvas-image');
ctxImage = cnvImage.getContext('2d');
ctxImage.drawImage(img,0,0);

cnvImage.setStyles({ 'width': 138, 'height': 48 });

var cnvLittle= $('canvas-little');
ctxLittle = cnvLittle.getContext('2d');
ctxLittle.drawImage(cnvImage,0,0);

Answer 1

Изменение размера элемента canvas не не изменяет размер растрового изображения. Это точно так же, как теги img, где изменение размера не меняет фактического содержимого изображения.

Если вы хотите нарисовать уменьшенную версию изображения, вы должны просто использовать версию с пятью аргументами context2d.drawImage():

context.drawImage(image, destinationX, destinationY, destinationHeight, destinationWidth);

Ваш пример, обновлен

Спецификация полотна - отличное место для похода; это много читать, но, как есть овощи, это полезно для вас.