У меня была та же проблема, и мне пришлось учиться трудным путем.Адаптивный Canvas и тот же аспект Ratio Canvas не так прост, как можно было бы надеяться.
Что нужно сделать:
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("taxi");
ctx.drawImage(img,10,10, 250, 300);
}
Позвольте мне объяснить, почему.
ВВаш HTML, вы объявили вручную:
width="250" height="300"
Таким образом, изображение, проецируемое на холст, должно быть одинакового размера.Все это управляется функцией ctx.drawImage (img, 10,10, 250, 300).
Первый аргумент для fn - это ссылочные данные, это может быть видео, изображение и т. Д.
Второй аргумент - это смещение оси X, третий аргумент - это смещение оси Y (если вы не хотите смещения, просто передайте: ctx.drawImage (img, 0,0, 250, 300);.
В этом случае 4-й и 5-й аргументы соответствуют размеру того, что было передано в качестве первого аргумента.
Вот кодовая ручка, попробуйте изменить аргументы и посмотреть, что произойдет.
https://codepen.io/pen/?editors=1010
PS, вы можете передать еще много аргументов этому методу, но обычно это все, что вам нужно.
Просто хотите добавить, вы можете увеличить изображение меньшего размера, чтобы оно соответствовалоCanvas, и наоборот, но если вы объявляете размер Canvas с атрибутами HTML и используете меньшие числа в drawImage fn, он не будет заполнять холст. Кажется, HTML имеет больше специфики. Это может быть хорошоили плохо, но это важно знать.