Jquery 调整画布元素/形状的大小

我基本上是在创建一个小脚本的过程中，这将允许你上传一个图像，在图像的某个地方标记一个黄色框，然后保存图像。我使用HTML5画布来实现这一点。我已经准备好了一切，上传图像并添加形状，但是现在我已经考虑到将要上传的各种大小的图像，我需要黄色的“形状”矩形来调整大小。我有一个滑块，当它们沿着滑块放置时，它会输出两个数字宽度和高度。这将调用onSizeChange：

    function onSizeChange(x2,y2) {
        context.clearRect(<?php echo $xcoord;?>, <?php echo $ycoord;?>, 30, 30);
        context.beginPath();
        context.rect(<?php echo $xcoord;?>, <?php echo $ycoord;?>, x2, y2);
        context.fillStyle = 'yellow';
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = 'black';
        context.stroke();
}

这种方法有理想的效果，但它也会删除背景图像块，不仅仅是黄色矩形，而且它只会从30,30调整大小，这是它清除的位，是原始的自动矩形大小

---

我正在努力做到这一点，我甚至尝试过清理整个画布，从头开始重新绘制，但即使面临这样的问题，任何帮助都将不胜感激

您可以根据任意大小使用初始黄色框大小。然后加载图像时，使用此任意大小创建比例因子

例如：

// lets say the yellow box' size is relative to:
var bWidth = 800,         // our "calibration" size.
    bHeight = 600,
    initialWidth = 50,    // size of yellow box relative
    initialHeight = 50;   // to "calibration" size.

加载图像并计算缩放因子：

var scaleX = image.width / bWidth;
var scaleY = image.height / bHeight;

现在只需将scaleX/Y与初始框大小相乘：

var newWidth = initialWidth * scaleX;
var newHeight = initialHeight * scaleY;

---

两鸟一石。不知道为什么我没有想到这一点，非常感谢你的回答@乔丹巴克：没问题：-祝你的项目好运！