Масштабировать контекст холста HTML5, чтобы подогнать изображение по вертикали

Question

Я занимаюсь разработкой веб-приложения Canvas, которое отображает изображение и пытается предотвратить панорамирование и масштабирование, чтобы пользователь не мог видеть за пределами изображения. Как я могу масштабировать контекст холста так, чтобы он соответствовал вертикальной высоте изображения относительно вертикальной высоты холста? Я не пытаюсь масштабировать изображение , так как я видел много решений для этого, мне нужен контекст холста для масштабирования / преобразования изображения.

Предотвращение панорамирования вне высоты (выше и ниже) тривиально, однако я не знаю, как установить правильный масштаб, чтобы пользователь не мог слишком сильно изменять масштаб изображения.

image.onload = () => {
    ctx.translate(-image.width/4, -image.height/4); 
    animate();
}

Здесь я перевожу свой контекст туда, где мне хотелось бы, чтобы это было на моем изображении, изатем начните рисовать, это в идеале, где будет правильное преобразование.

Answer 1

Сам разобрался с ответом, это простой случай, когда зная, что canvas.height = scale * image.height, можно просто переставить это уравнение в scale = canvas.height/image.height.

Важно, конечно, отметить, что это толькоработает, когда текущее масштабное преобразование равно 1, в противном случае масштаб должен быть относительно вашего текущего масштабного преобразования.