HTML을 캔버스 크기 조정과 좌표 공간

Question

참고 : 내가 구글 크롬을 사용하고

현재

내가 가지고있는이 테스트 페이지

http://www.evecakes.com/doodles/canvas_size_issue.htm

그것은 , 오른쪽 마우스 커서 아래에 사각형을 그립니다해야하지만, 다양한 오프셋에서 그릴 수있는 정말 이상한 스케일링 문제가 있습니다. 캔버스 좌표 공간이 html 크기와 함께 증가하지 않기 때문이라고 생각합니다. 좌표 공간 크기를 늘릴 수있는 방법이 있습니까?

다음은 캔버스의 width 및 height HTML 속성을 설정 자바 스크립트 함수

$('#mapc').mousemove(function (event) { 

      var canvas = $('#mapc'); 
      var ctx = canvas[0].getContext('2d'); 

      ctx.fillStyle = "rgb(200,0,0)"; 
      ctx.fillRect(event.clientX, event.clientY, 55, 50); 

      document.title = event.clientX + " --- " + event.clientY; 

     }); 

Answer 1

입니다. 지금 당장은 기본 너비를 가정하고 CSS는 단지 그것을 늘이고 있으며 크기 조정중인 것처럼 보입니다.

사이드 노트에서 #mapc 요소에 대한 참조이므로 mousemove 이벤트에서 this을 사용할 수 있습니다. 따라서 마우스를 이동할 때마다 DOM을 쿼리 할 필요가 없습니다.

var offset = $('#mapc').offset(); 

$('#mapc').mousemove(function (event) { 

    var ctx = this.getContext('2d'); 

    ctx.fillStyle = "rgb(200,0,0)"; 
    ctx.fillRect(event.pageX - offset.left, event.pageY - offset.top, 1, 1); 
});