Получение правильной ширины и высоты элемента холста

Question

У меня возникают трудности с установкой правильной ширины и высоты моего элемента холста.

У меня есть мяч, который я бы хотел отскочить назад, когда он попадает на границу экрана, изменяя вертикальную скорость. Он работает, но вместо того, чтобы двигаться назад, как только он попадает в край экрана, он продолжается в течение нескольких секунд, и THEN возвращается. У меня есть эти переменные, чтобы определить размер окна просмотра:

var left = 0, 
    right = canvas.width, 
    top = 0, 
    bottom = canvas.height; 

Если х моего шара или у позиции за пределами этих границ, то скорость должна быть изменена на отрицательный. Однако во время моей анимации я console.log это позиция x, и к тому времени, когда она дойдет до правого края экрана, значение будет около 600, что действительно странно, так как я на мониторе 1366x768 пикселей.

Кроме того, он не полностью достигает края левого края, но отскакивает от него как 50px.

Любые идеи действительно оценены, потому что я давно застрял на этом.

Вы можете увидеть рабочий пример здесь: http://codepen.io/gbnikolov/pen/puiwk

Answer 1

Обновить ваш Жеребьевка к следующему.

Ball.prototype.draw = function(ctx) { 
    ctx.save(); 
    // you've translated to the x and y position of the ball. 
    ctx.translate(this.x, this.y); 
    ctx.rotate(this.rotation); 
    ctx.scale(this.scaleX, this.scaleY); 
    ctx.lineWidth = this.lineWidth; 
    ctx.fillStyle = this.color; 
    ctx.strokeStyle = this.strokeColor; 
    ctx.beginPath(); 
    // Draw at 0,0 since we are already translated to the x and y. 
    ctx.arc(0, 0, this.radius, 0, Math.PI * 2, true); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 
    ctx.restore(); 
} 

Live Demo

Ваша проблема заключается в методе дро, вы переводите контекст, а затем делает дугу на х и у шара, так что если вы переводите 20, 20 для пример, а затем нарисуйте на 20,20, ваш мяч на самом деле равен 40,40.