HTML canvas things stretch to the bottom/right

When trying to make a little game engine, I've run into a problem quick. The canvas I'm working on stretches rectangles when they get closer to the bottom and/or the right. I've looked around and I can't seem to find anyone else having the same problem. I made a slider demo to show the issue. I'll include the code that most likely has the problem below.

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);

And the code that uses it

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

Note: This problem is most likely not caused by CSS resizing of the canvas for two reasons, and one of them is that I don't use CSS to resize the canvas.


Parameter 3 and 4 of fillRect are width and height, not coordinates

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

Need Your Help

Call Function in Underlying ViewController as Modal View Controller is Dismissed

iphone objective-c modalviewcontroller viewdidappear

I have a mainViewController. I call [self pushModalViewController:someViewController] which makes someViewController the active view.

How to perform multiplication on two column for datagrid view and assigning it in third column?

c# winforms datagridview datagridviewcolumn

Here is my code, I am trying to display multiplication of Rate * Supply column values and assigning it to the Amount column in data grid view :