JCanvas: toile en plein écran avec l'image draggable oversize

Question

En utilisant JCanvas, je voudrais faire deux choses:

1. définir la taille d'une toile selon dynamiquement à la largeur et la hauteur de l'écran. Dessinez une image plus grande que l'écran sur la toile et faites-la glisser, en faisant glisser le pointeur sur les bords de l'image.

Je le code suivant:

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

Malheureusement, le navigateur ne montre qu'une petite partie du centre de l'image (w: 300 px; h: 150 px) en haut à gauche coin. Pour autant que je sache, aucun CSS n'est impliqué ici. Je peux faire glisser l'image dans la petite fenêtre d'affichage de 300 px x 150 px. Cependant, je veux que la partie visible de l'image soit étalée en plein écran et que je la traîne pour arrêter les bords de l'écran: aucun espace blanc ne sera jamais visible.

Qu'est-ce que je fais mal?

Answer 1

Essayez

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

Comme je ne peux jamais entraîner ce Jquery car il est loin d'être évident en regardant votre code. Si cela fonctionne, vous savez que jQuery définit la largeur et la hauteur du style. Pour le canevas, la largeur et la hauteur définissent la résolution en pixels et la hauteur canvas.style.width définit la taille de l'affichage.

La résolution de la toile par défaut est canvas.width = 300 et canvas.height = 150