如何缩放HTML画布中的图形并将其复制到另一个画布？

Question

If I draw something on my canvas I would like to press save and then on save scale the image of the drawing to fit a smaller canvas in another part of the page. I think it would have something to do with the base64 src of the drawing but I'm not entirely sure how it could be done.

Suppose if the original canvas I drew on was 600px by 400px and the smaller canvas was 300px by 150px when what would the code look like?

Answer 1

Since the two canvases have different aspect ratios, I would use the following syntax:

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

In this cases sx , sy , sWidth and sHeight specify which part of the original canvas should be copied, while dx , dy , dWidth and dHeight specify which part of the canvas they should be rendered on.

 const canvas1 = document.getElementById("c"); const ctx1 = canvas1.getContext("2d"); ctx1.beginPath() ctx1.arc(125,125,100,0,2*Math.PI); ctx1.stroke() const canvas2 = document.getElementById("c1"); const ctx2 = canvas2.getContext("2d"); ctx2.drawImage(canvas1,0,0,600,400,0,0,300,150); 

 canvas{border:1px solid} 

 <canvas id="c" width="600" height="400"></canvas> <canvas id="c1" width="300" height="150"></canvas>