0

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?

kalabalik
  • 3,792
  • 2
  • 21
  • 50

1 Answers1

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

Blindman67
  • 51,134
  • 11
  • 73
  • 136
  • Worked! Thank you! So, although I have a jCanvas reference to the canvas, jCanvas does not let me set the canvas' properties. Do you have a clue how I would make the dragging stop at the edges of the image? Do I have to track the position of the image in the drag callback? – kalabalik Nov 30 '16 at 00:34