Как я могу масштабировать рисунок с холста HTML и скопировать его на другой холст?

Question

Если я рисую что-то на своем холсте, я хочу нажать «Сохранить», а затем при сохранении масштабировать изображение чертежа, чтобы оно поместилось на меньшем холсте в другой части страницы.Я думаю, что это как-то связано с исходным кодом base64 чертежа, но я не совсем уверен, как это можно сделать.

Предположим, если исходный холст, на котором я рисовал, был 600 на 400 пикселей и меньший холстбыл 300px на 150px, когда код будет выглядеть?

Answer 1

Поскольку оба полотна имеют разные пропорции, я бы использовал следующий синтаксис:

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

В этом случае sx, sy, sWidth и sHeight указывают, какая часть исходного холста должна быть скопирована, а dx, dy, dWidth и dHeight указывают, на какую часть холста они должны быть отображены.

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>