Рисование в холсте становится смещенным

Question

Я пытаюсь втянуть в холст, но чем больше я иду, тем более смелым становится мой рисунок.

У кого-нибудь есть идея, почему?

Я включил соответствующий код ниже:

CSS

html,body { 
    width:100%; 
    height:100%; 
    background:rgba(0,0,0,.2); 
} 
#container { 
    position:relative; 
    width:700px; 
    height:450px; 
    background:#fff; 
    overflow:hidden; 
} 
* { 
    -webkit-user-select: none; 
} 
canvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: #ccc; 
    width: 500px; 
    height: 200px; 
} 

HTML

<div id='adContainer'> 
    <canvas></canvas> 
</div> 

Javascript

var ctx; 
var can = $('canvas'); 

$(document).ready(function() { 
    ctx = can[0].getContext('2d'); 
    ctx.strokeStyle = "rgba(255,0,0,1)"; 
    ctx.lineWidth = 5; 
    ctx.lineCap = 'round'; 

    can.on("touchstart", function(event) { 
     event.preventDefault(); 
     var e = event.originalEvent; 
     if(e.touches.length == 1) { 
      var posX = e.touches[0].pageX; 
      var posY = e.touches[0].pageY; 
      ctx.moveTo(posX, posY); 
     } 
    }); 

    can.on("touchmove", function(event) { 
     event.preventDefault(); 
     var e = event.originalEvent; 
     if(e.touches.length == 1) { 
      var posX = e.touches[0].pageX; 
      var posY = e.touches[0].pageY; 
      ctx.lineTo(posX, posY); 
      ctx.stroke(); 
     } 
    }); 
}); 

Demo: http://jsfiddle.net/8Wtf8/

Answer 1

Это потому, что вы определяете размер холста с помощью CSS.

Что происходит, что, когда вы явно не определить размер холста, используя его атрибуты ширину и высоту холста по умолчанию для размера 300 х 150.

В вашем CSS вы затем растягивая элемент холста (смотреть на него, как изображение) в 500px и т.д. - содержание холста еще 300 х 150.

Вам необходимо установить ширину и высоту на самом холсте элемент:

<canvas width=500 height=200 id="myCanvas"></canvas> 

и удалить определение из CSS:

canvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: #ccc; 
    /*width: 500px; 
    height: 200px;*/ 
} 

Также обратите внимание, что фон, заданный CSS, не будет частью содержимого холста.