Javascript 画布拉伸，而不是裁剪和开始位置

我得到了一块画布，上面有一些掉落的五彩纸屑，我用这个jquery更改了画布在Croll上的高度：

$(window).on("scroll touchmove", function () {
    $('#world').toggleClass('tiny', $(document).scrollTop() > 0);
});

但是画布只是被拉伸而不是被裁剪，所以五彩纸屑看起来很奇怪。 那是我的五彩纸屑：

(function() {
  var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos;

  NUM_CONFETTI = 350;
  COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];
  PI_2 = 2 * Math.PI;
  canvas = document.getElementById("world");
  context = canvas.getContext("2d");
  window.w = 0;
  window.h = 0;
  resizeWindow = function() {
    window.w = canvas.width = window.innerWidth;
    return window.h = canvas.height = window.innerHeight;
  };
  window.addEventListener('resize', resizeWindow, false);
  window.onload = function() {
    return setTimeout(resizeWindow, 0);
  };
  range = function(a, b) {
    return (b - a) * Math.random() + a;
  };
  drawCircle = function(x, y, r, style) {
    context.beginPath();
    context.arc(x, y, r, 0, PI_2, false);
    context.fillStyle = style;
    return context.fill();
  };
  xpos = 0.5;
  document.onmousemove = function(e) {
    return xpos = e.pageX / w;
  };
  window.requestAnimationFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
      return window.setTimeout(callback, 1000 / 60);
    };
  })();
  Confetti = (function() {
    function Confetti() {
      this.style = COLORS[~~range(0, 5)];
      this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2];
      this.r = ~~range(2, 6);
      this.r2 = 2 * this.r;
      this.replace();
    }
    Confetti.prototype.replace = function() {
      this.opacity = 0;
      this.dop = 0.03 * range(1, 4);
      this.x = range(-this.r2, w - this.r2);
      this.y = range(-20, h - this.r2);
      this.xmax = w - this.r;
      this.ymax = h - this.r;
      this.vx = range(0, 2) + 8 * xpos - 5;
      return this.vy = 0.7 * this.r + range(-1, 1);
    };
    Confetti.prototype.draw = function() {
      var ref;
      this.x += this.vx;
      this.y += this.vy;
      this.opacity += this.dop;
      if (this.opacity > 1) {
        this.opacity = 1;
        this.dop *= -1;
      }
      if (this.opacity < 0 || this.y > this.ymax) {
        this.replace();
      }
      if (!((0 < (ref = this.x) && ref < this.xmax))) {
        this.x = (this.x + this.xmax) % this.xmax;
      }
      return drawCircle(~~this.x, ~~this.y, this.r, this.rgb + "," + this.opacity + ")");
    };
    return Confetti;
  })();
  confetti = (function() {
    var j, ref, results;
    results = [];
    for (i = j = 1, ref = NUM_CONFETTI; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
      results.push(new Confetti);
    }
    return results;
  })();
  window.step = function() {
    var c, j, len, results;
    requestAnimationFrame(step);
    context.clearRect(0, 0, w, h);
    results = [];
    for (j = 0, len = confetti.length; j < len; j++) {
      c = confetti[j];
      results.push(c.draw());
    }
    return results;
  };
  step();
}).call(this);

（函数（）{
var颜色、五彩纸屑、NUM_五彩纸屑、PI_2、画布、五彩纸屑、上下文、绘图圈、i、范围、大小窗口、XPO；
五彩纸屑数量=350；
颜色=[[85,71,106]，[174,61,99]，[219,56,83]，[244,92,68]，[248,182,70]；
PI_2=2*Math.PI；
canvas=document.getElementById（“世界”）；
context=canvas.getContext（“2d”）；
窗口w=0；
h=0；
resizeWindow=函数（）{
window.w=canvas.width=window.innerWidth；
返回窗口.h=canvas.height=window.innerHeight；
};
addEventListener（'resize'，resizeWindow，false）；
window.onload=函数（）{
返回setTimeout（resizeWindow，0）；
};
范围=功能（a，b）{
return（b-a）*Math.random（）+a；
};
drawCircle=功能（x、y、r、样式）{
context.beginPath（）；
弧（x，y，r，0，PI_2，false）；
context.fillStyle=样式；
返回context.fill（）；
};
xpos=0.5；
document.onmousemove=函数（e）{
返回xpos=e.pageX/w；
};
window.requestAnimationFrame=（函数（）{
返回window.requestAnimationFrame | | window.webkitRequestAnimationFrame | | window.mozRequestAnimationFrame | | | window.oRequestAnimationFrame | | window.msRequestAnimationFrame | | |函数（回调）{
返回窗口。设置超时（回调，1000/60）；
};
})();
五彩纸屑=（函数（）{
功能五彩纸屑（）{
this.style=颜色[~~范围（0,5）]；
this.rgb=“rgba（“+this.style[0]+”、“+this.style[1]+”、“+this.style[2]”）；
这个.r=~~范围（2,6）；
this.r2=2*this.r；
这个。替换（）；
}
Confetti.prototype.replace=函数（）{
这是不透明度=0；
这个.dop=0.03*范围（1,4）；
该.x=范围（-this.r2，w-this.r2）；
this.y=范围（-20，h-this.r2）；
this.xmax=w-this.r；
this.ymax=h-this.r；
这个.vx=范围（0,2）+8*xpos-5；
返回this.vy=0.7*this.r+范围（-1,1）；
};
Confetti.prototype.draw=函数（）{
var-ref；
this.x+=this.vx；
this.y+=this.vy；
this.opacity+=this.dop；
如果（this.opacity>1）{
这是不透明度=1；
这个参数为.dop*=-1；
}
if（this.opacity<0 | | this.y>this.ymax）{
这个。替换（）；
}
如果（！（（0<（ref=this.x）和&ref对于（i=j=1，ref=NUM_CONFETTI；1问题是，当画布尝试检测
窗口。调整大小
事件时，动画不会更改窗口的大小。相反，它只是收缩画布的包装，这使得动画很奇怪。我想你要做的是将
溢出：隐藏；
添加到画布的容器，以便在更改大小时，画布内部可以保留其大小（通过在画布上设置
高度：\uuuupx；
规则）

希望这有助于：

您可能可以删除
窗口的侦听器。调整大小

编辑-
溢出：隐藏；
不起作用：

只需从画布中删除规则
position:fixed；
和
height:100%；
。在页面加载时，画布已调整到正确的大小并保持在正确的位置。固定位置的元素将显示在静态位置的元素上。删除这两种样式，一切都应该与JSFIDL中的一样e