Update multiple <canvas> at different sizes

[Brian Miller]

Can someone help me with a little bit of JavaScript?

 

Have a look at the attached image, I have a <canvas> element called "pic_256", that has a Picture that I've populated. I'd also like to add the same picture to the two other canvases, Each at different sizes, one at 128*128 and the other one at 64*64.  Is there an easy way to update the other canvas elements ("pic_128" and "pic_64")with a smaller version of the original canvas ("pic_256")?

 

 

[sorlag]

Maybe by getting the canvas context into a variable    var destcontext = dest.getContext('2d');

and then doing a drawImage    ctx = dest       "image" = source

 

void ctx.drawImage(image, dx, dy);

void ctx.drawImage(image, dx, dy, dWidth, dHeight);

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

 

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

[Brian Miller]

Thank you

I've found that when I resize the image to a smaller size using canvas, the smaller version is not as smooth as it looks if I do it in Photoshop.  Are there any tricks that I can do to make my images scale down nicely in JS?

[sorlag]

you might try different solutions...

 

ctx.imageSmoothingEnabled = false || true   (true is default)

ctx.imageSmoothingQuality = "low" || "medium" || "high"

 

or css

image-rendering: auto;

image-rendering: crisp-edges;

image-rendering: pixelated;

image-rendering: smooth;

 

Here are also 2 different solutions.  One is with filters, and one is with resizing in multiple steps instead one step.

https://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing

Here is a multistep solution also

https://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality

 

Please tell me which version worked for you 😃

[Brian Miller]

FANTTASTIC!!!!

Thank you so much.  The CSS version did not work for me but the canvas context method worked.

 

 

 

On 21/02/2021 at 11:48, sorlag said:

you might try different solutions...

 

ctx.imageSmoothingEnabled = false || true   (true is default)

ctx.imageSmoothingQuality = "low" || "medium" || "high"

 

or css

image-rendering: auto;

image-rendering: crisp-edges;

image-rendering: pixelated;

image-rendering: smooth;

 

Here are also 2 different solutions.  One is with filters, and one is with resizing in multiple steps instead one step.

https://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing

Here is a multistep solution also

https://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality

 

Please tell me which version worked for you 😃