JCanvas: полноэкранный холст с перетаскиваемым изображением большого размера

Question

Используя JCanvas, я хотел бы сделать две вещи:

1. Определите размер холста динамически в соответствии с шириной и высотой экрана.

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

У меня есть следующий код:

function init() {
    $canvas = $('#canvas');
    $canvas.width = window.innerWidth;
    $canvas.height = window.innerHeight;

    $canvas.drawImage({
        x: 0,
        y: 0,
        source: "../images/testimage.jpg",
        draggable: true,
        layer: true,
    }).drawLayers();
}

К сожалению, браузер показывает только небольшой участок от центра изображения (w: 300 px; h: 150 px) в верхнем левом углу. Насколько я могу судить, CSS здесь не задействован.

Я могу перетащить изображение в маленьком окне размером 300 x 150 пикселей. Тем не менее, я хочу, чтобы видимая часть изображения была растянута по всему экрану и перетаскивала ее, чтобы остановить края экрана: никогда не должно быть видимых пробелов.

Что я делаю неправильно?

Answer 1

Пытаться

var canvas = document.getElementById('canvas');
canvas.width = innerWidth;
canvas.height = innerHeight;

Поскольку я никогда не могу понять, что такое Jquery, это далеко не так очевидно, глядя на ваш код. Если это работает, то вы знаете, что jQuery устанавливает ширину и высоту стиля. Для холста ширина и высота устанавливают разрешение в пикселях, а высота canvas.style.width устанавливает размер экрана.

Разрешение холста по умолчанию: canvas.width = 300 а также canvas.height = 150