JCanvas: full screen canvas with oversize draggable image
<p>Using JCanvas, I would like to do two things:</p>

<ol>
<li><p>Define the size of a canvas dynamically according to the width and height of the screen.</p></li>
<li><p>Draw an image bigger than the screen to the canvas and make it draggable, with dragging stopping at the edges of the image.</p></li>
</ol>

<p>I have the following code:</p>

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

<p>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.</p>

<p>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.</p>

<p>What am I doing wrong?</p>