캔버스의 setAttribute 너비로 백분율 값으로

Question

저는 사용자가 휴대폰과 태블릿으로 Canvas에서 그릴 수있는 웹 애플리케이션에서 작업하고 있습니다. 내 문제는 CSS의 백분율 값으로 캔버스의 크기를 지정하면 TouchDraw-Script (http://www.codeproject.com/Articles/355230/HTML-5-Canvas-A-Simple-Paint-Program-Touch-and-Mou)가 올바르게 작동하지 않는다는 것입니다. 그것은 슬픈 일입니다. 그렇지 않으면 완벽합니다. 내가 다른 화면 해상도 처리해야 물론

sigCanvas.setAttribute('width', '320'); 
sigCanvas.setAttribute('height', '480'); 

, 그래서 백분율 값이 가장 좋은 것입니다 :

그래서 내가 직접이 같은 스크립트에 캔버스의 폭과 높이를 지정하는 것이 생각. 내 코드에서 백분율 값을 사용하는 방법이 있습니까? 원인

sigCanvas.setAttribute('width', '90%'); 

가 작동하지 않습니다. 미리 감사드립니다.

Answer 1

좋아, 그래서 당신이 그렇게 같은 window resize event에 부착하여 당신이 원하는 것을 할 수 있습니다 : 여기

$(window).resize(callbackFunc); 

내가 그것을 작동하게하기 위해 변경 한 내용입니다.

See on jsFiddle

$(document).ready(function() { 
    initialize(); 

    updateSize(); 
}); 

$(window).resize(updateSize); 

function updateSize() { 
    var sigCanvas = document.getElementById("canvasSignature"); 
    var xOffset = 100; 
    var yOffset = 100; // header height 
    sigCanvas.setAttribute('width', window.innerWidth - xOffset); 
    sigCanvas.setAttribute('height', window.innerHeight - yOffset); 
} 

xOffset 및 yOffset은 여러분의 필요에 사용자 정의 할 수 있습니다, 우리는 그렇지 캔버스 페이지를 꺼지고 윈도우의 폭과 높이에서 뺄 필요가있다. 또한 페이지가로드되어 크기가 올바른 크기로 조정될 때 실행해야합니다.