Нужна помощь репозиционирование круга, когда размер холста меняется

Question

Поэтому я использую функцию из этого учебника

http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/#disqus_thread

это выглядит -

function resizeGame() { 
     var gameArea = document.getElementById('canvas-container'); 
     var widthToHeight = 11/6; 
     var newWidth = window.innerWidth; 
     var newHeight = window.innerHeight; 
     var newWidthToHeight = newWidth/newHeight; 

     if (newWidthToHeight > widthToHeight) { 
      newWidth = newHeight * widthToHeight; 
      gameArea.style.height = newHeight + 'px'; 
      gameArea.style.width = newWidth + 'px'; 
     } else { 
      newHeight = newWidth/widthToHeight; 
      gameArea.style.width = newWidth + 'px'; 
      gameArea.style.height = newHeight + 'px'; 
     } 

     gameArea.style.marginTop = (-newHeight/2) + 'px'; 
     gameArea.style.marginLeft = (-newWidth/2) + 'px'; 

     var gameCanvas = document.getElementById('ctx'); 
     gameCanvas.width = newWidth; 
     gameCanvas.height = newHeight; 
     HEIGHT = newHeight; 
     WIDTH = newWidth 
    } 

Так что все, что я используйте WIDTH и HEIGHT для позиционирования на холсте. Но есть и другие вещи, которые у меня есть в моей игре, которые просто используют x и y и не меняются с помощью холста.

if(drawBall){ 
       ctx.save(); 
       ctx.beginPath(); 
       ctx.arc(ball.x, ball.y, (ball.diameter/2) - 5,0, 2*Math.PI); 
       ctx.fillStyle = ball.color; 
       ctx.fill(); 
       ctx.restore(); 
      } 

Что я могу сделать с моим ball.x и ball.y, чтобы он правильно изменился с помощью холста?

Answer 1

Все сводится к отношениям. Знание того, что вы всегда можете изменить положение вещей при изменении размеров экрана.

var ratio = { x:1, y: 1 }; 
function start(){ 
    ratio.x = canvas.width/canvas.clientWidth; 
    ratio.y = canvas.height/canvas.clientHeight; 
    drawSomething(); 
} 

function drawSomething(){ 
    context.rect(rectX * ratio.x, rectY * ratio.y, rectWidth * ratio.x, rectHeight * ratio.y); 
    /// stroke and all that good stuff 
} 

now listen for window change 
window.onresize = function(){ 
    // get new ratio's and draw again 
    start(); 
} 

С этим не имеет значения, что изменить размер пользователь делает холст потянет на той же относительной позиции и размера.