JCanvas: full screen canvas with oversize draggable image

Question

Using JCanvas, I would like to do two things:

1. Define the size of a canvas dynamically according to the width and height of the screen.

2. Draw an image bigger than the screen to the canvas and make it draggable, with dragging stopping at the edges of the image.

I have the following code:

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();
}

Unfortunately, the browser shows only a small section from the center of the image (w: 300 px; h: 150 px) in the upper left corner. As far as I can tell, no CSS is involved here.

I can drag the image in the small 300 px x 150 px viewport. However, I want the visible part of the image to be spread over the full screen and dragging to stop a the edges of the screen: no white space shall ever be visible.

What am I doing wrong?

Answer 1

Try

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

As I can never workout what Jquery as it is far from obvious looking at your code. If that works then you know that jQuery is setting the style width and height. For the canvas the width and height set the pixel resolution and the canvas.style.width height set the display size.

The default canvas resolution is canvas.width = 300 and canvas.height = 150