JCanvas: Vollbild-Leinwand mit Übermaß ziehbar Bild

Question

Mit JCanvas, würde Ich mag zwei Dinge tun:

1. Legen Sie die Größe einer Leinwand dynamisch entsprechend der Breite und Höhe des Bildschirms.

2. Zeichnen Sie ein Bild, das größer als der Bildschirm ist, auf die Leinwand und ziehen Sie es, ziehen Sie dabei an den Rändern des Bildes.

Ich habe den folgenden 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(); 
} 

Leider der Browser zeigt nur einen kleinen Ausschnitt aus der Mitte des Bildes (w: 300 Pixel; h: 150 Pixel) in der linken oberen Ecke. Soweit ich das beurteilen kann, ist hier kein CSS involviert.

Ich kann das Bild im kleinen 300 px x 150 px Ansichtsfenster ziehen. Ich möchte jedoch, dass der sichtbare Teil des Bildes über den gesamten Bildschirm verteilt wird und durch Ziehen an den Rändern des Bildschirms angehalten wird: Kein weißer Bereich sollte jemals sichtbar sein.

Was mache ich falsch?

Answer 1

Versuchen

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

Wie kann ich nie trainieren, was JQuery, wie es bei weitem nicht offensichtlich ist bei Ihrem Code suchen. Wenn das funktioniert, dann wissen Sie, dass jQuery die Stilbreite und -höhe einstellt. Für die Leinwand legen die Breite und Höhe die Pixelauflösung und die Höhe der Leinwand fest.

Die Standard Leinwand Auflösung ist canvas.width = 300 und canvas.height = 150