JCanvas : 대형 드래그 이미지 JCanvas를 사용

Question

전체 화면 캔버스, 나는이 일을하고 싶습니다

1. 동적 화면의 폭과 높이에 따라 캔버스의 크기를 정의합니다.

2. 캔버스에 화면보다 큰 이미지를 그려서 드래그하여 이미지의 가장자리에서 멈추게하십시오. (: H : 300 픽셀 150 PX w) 왼쪽에서

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

   불행히도, 브라우저가 이미지의 중심에서 단지 작은 부분이 보여

I는 다음과 같은 코드가 모서리. 제가 말할 수있는 한 여기에는 CSS가 포함되어 있지 않습니다.

작은 300x150 픽셀의 이미지를 드래그 할 수 있습니다. 그러나 이미지의 보이는 부분이 전체 화면에 퍼져서 화면의 가장자리를 멈추게하려면 흰 공백이 보이지 않아야합니다.

내가 뭘 잘못하고 있니?

Answer 1

는

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

을 시도로서 내가 할 수있는 결코 운동 무엇을 당신의 코드를 찾고까지 명백한로부터 jQuery를한다. 작동한다면 jQuery가 스타일의 너비와 높이를 설정한다는 것을 알 수 있습니다. 캔버스의 경우 너비와 높이가 픽셀 해상도를 설정하고 canvas.style.width 높이가 디스플레이 크기를 설정합니다.

기본 캔버스 해상도가 canvas.width = 300 및 canvas.height = 150