javascript - HTML Canvas 内容拉伸(stretch)到底部/右侧

Question

当尝试制作一个小游戏引擎时，我很快遇到了一个问题。当我正在处理的 Canvas 靠近底部和/或右侧时，它们会拉伸(stretch)矩形。我环顾四周，似乎找不到其他人遇到同样的问题。我做了一个 slider 演示来展示这个问题。
http://codepen.io/Magnesium/pen/wMwwgx
我将在下面包含最有可能出现问题的代码。

var engine = function(canvas) { // Trying to make a game engine when the problems started
  this.canvas = canvas.getContext("2d");
  this.defaultColor = "#FF0000";
  this.clearCanvas = function() { // Clears canvas
    this.canvas.clearRect(0, 0, canvas.width, canvas.height);
  };

  this.square = function(x, y, size, color) { // Makes a square. I don't see any problems, but if the error is caused by me it would probably be here
    if (color == undefined) color = this.defaultColor;
    this.canvas.fillStyle = color;
    this.canvas.fillRect(x, y, x + size, y + size);
  };
}

以及使用它的代码

setInterval(function() {  // Called ~30 times a second
  enjin.clearCanvas();
  enjin.square(parseInt(rangeX.value), parseInt(rangeY.value), parseInt(size.value));
}, 30);

注意:这个问题很可能不是由 CSS 调整 Canvas 大小引起的，原因有两个，其中之一是我没有使用 CSS 调整 Canvas 大小。

Answer 1

fillRect的参数3和4是宽度和高度，而不是坐标

this.canvas.fillRect(x, y, size, size);

https://developer.mozilla.org/de/docs/Web/API/CanvasRenderingContext2D/fillRect