如何重新缩放图像以使用画布绘制？

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>