Question

How can I duplicate the content of a resized canvas inside another one?

If I draw an image inside a canvas and then I resize it, when I’ll clone the content I duplicate the first canvas at its original size, even if it’s resized.

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

Changing the size of the canvas element does not change the size of the underlying image raster. This is exactly like img tags, where changing the size does not change the actual contents of the image.

If you want to draw a scaled version of an image, you should just use the five-argument version of context2d.drawImage():

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

Your example, updated

The canvas spec is an excellent place to go; it’s a lot to read but, like eating your vegetables, it’s good for you.