Javascript 缩放html画布上的鼠标图形元素

有没有办法在画布上缩放绘图元素？我正在创建一个应用程序，用户可以在画布上放置点，但当我尝试调整浏览器窗口的大小时，所有元素都消失了

我最初的尝试是计算屏幕大小调整前后的差异。在我得到百分比后，我只是将比例放在画布上，并将我第一次在画布上绘制时保存的坐标放置在画布上，但仍然不起作用，如果点出现在画布上，则它位于相同的位置，而不进行缩放。有人能给我一点想法吗

private calculateCanvasScreenDifference(previousSize, guestScreen) {

    return ((controlScreen - currentSize) * 100) / controlScreen;
}

let difWidthPercent = Math.abs(this.calculateCanvasScreenDifference(canvasPreviousWidth, canvasWidth) * 0.01);
let difHeightPercent = Math.abs(this.calculateCanvasScreenDifference(canvasPreviousHeight, canvasHeight) * 0.01);                        

let scaleX = ((Math.abs(difWidthPercent) <= 1) ? 1.00 - difWidthPercent : difWidthPercent - 1.00);
let scaleY = ((Math.abs(difHeightPercent) <= 1) ? 1.00 - difHeightPercent : difHeightPercent - 1.00);

this.cx.scale(Number(scaleX), Number(scaleY));

...
...

// then start recreating the drawing that was previous saved on an array of object(x, y values)

this.cx.beginPath();
this.cx.arc(coord.x, coord.y, 7, 0, Math.PI * 2, true);
this.cx.stroke();

private calculatecanvascreen差异（以前的大小，guestScreen）{
返回（（controlScreen-currentSize）*100）/controlScreen；
}
设difWidthPercent=Math.abs（此.CalculateCanScreendivity（canvasPreviousWidth，canvasWidth）*0.01）；
让difHeightPercent=Math.abs（这个.calculatecanvascreendivity（canvasPreviousHeight，canvasHeight）*0.01）；
让scaleX=（（Math.abs（difWidthPercent）跟踪画布宽度，并从比例因子1开始

let originalWidth = canvas.width;

let scale = 1;

在调整大小时，计算新的比例因子，并更新跟踪的画布大小

let scale = newWidth / originalWidth;
originalWidth = newWidth;

始终对所有图形使用比例因子。例如

context.arc(coord.x * scale, coord.y * scale, radius, 0, Math.PI*2, false);

注意：此方法假设原始画布和新画布的大小成比例。如果不是，则需要跟踪宽度和高度，并计算单独的x和y比例因子