Обновление ширины анимации холста при изменении размера окна

Question

Не могу понять, как получить это на месте.У меня есть правильная функция запуска, но я теряюсь, когда речь заходит о том, почему логика не работает мой сценарий.У меня есть файл console.log, показывающий, что переменные обновляются, но ширина анимации при этом не обновляется.

Javascript

$( document ).ready(function() {


var imgTag = new Image();
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x = canvas.width;
var y = 0;

imgTag.onload = animate;
imgTag.src = "http://foodhall.hellogriptest.com/hh/assets/medallion-bounce.png";



var h = window.innerHeight;
var w = window.innerWidth;

canvas.height = h;
canvas.width = w;


//moving image
var mover = {
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  color: '#000',
  down: true,
  right: true
}

function animate() {
  clear();
  render();
  rID = requestAnimationFrame(animate);
}

function clear() {
  context.clearRect(0, 0, canvas.width, canvas.height);
}

function render() {
  //set direction
  if (mover.down && mover.y >= h - mover.height)
    mover.down = false;

  if (!mover.down && mover.y <= 0)
    mover.down = true;

  if (mover.right && mover.x >= w - mover.width)
    mover.right = false;

  if (!mover.right && mover.x <= 0)
    mover.right = true;

  //make move
  if (mover.right)
    mover.x += 6;
  else
    mover.x -= 6;

  if (mover.down)
    mover.y += 6;
  else
    mover.y -= 6;

  //drawRectangle(mover);
  drawImage(mover);

}

function drawImage(mover) {
  context.drawImage(imgTag, mover.x, mover.y); // draw image at current position
}

window.onresize = function() {  
   W = window.innerWidth;
   H = window.innerHeight;
   canvas.width = W;
   canvas.height = H;
   x = W;
  console.log(x);
  clear();
  render();
  drawImage(mover);
}


});//ready

Codepen - https://codepen.io/alcoven/pen/KROPrK

Answer 1

Это простое исправление.В начале вашего сценария вы устанавливаете строчные и строчные буквы h в ширину и высоту окна, но в функции изменения размера вы устанавливаете W = window.innerWidth.Затем создается заглавная переменная W, которой назначается innerWidth.Переменная w в нижнем регистре все еще существует в качестве исходной ширины, и это то, что использует ваш рендер.