javascript - How to rescale image to draw with canvas?

Question

If you have an idea , Starting from the code of this post In javascript , how to reverse y axis of canvas?( with the Flip rendered content solution) i would like to draw this last image (200*200) in a 100*100 canvas, rescaling it using ctx.drawImage(ctx.canvas,0,0,200,200,0,0,100,100) but it only crops it regards

Answer 1

Scale the context by 0.5 before drawing.

ctx.scale(0.5,0.5)

var i,j;
const n = 200;
const size = n ** 2;  // ** is to power of
//const canvas = document.querySelector('canvas'); // not needed canvas is 
                                                   // already defined with 
                                                   // id="canvas"
const ctx = canvas.getContext("2d");
const imgData = ctx.createImageData(n, n);
const Z = [];
for (j = 0; j < size; j ++) { Z[j] = j * 256 / size }
Z[n * n - 1] = 0;
i = 0;
for (j = 0; j < size; j++) {
  imgData.data[i++] = Z[j];
  imgData.data[i++] = Z[j];
  imgData.data[i++] = Z[j];
  imgData.data[i++] = 255;
}
ctx.putImageData(imgData, 0, 0);
ctx.scale(0.5,0.5);
// flip the canvas
ctx.transform(1, 0, 0, -1, 0, canvas.height)
ctx.globalCompositeOperation = "copy"; // if you have transparent pixels
ctx.drawImage(ctx.canvas,0,0);
ctx.globalCompositeOperation = "source-over"; // reset to default

<canvas id="canvas" width=200 height=200></canvas>