CODEWITHSUNDEEP
javascripthtmlcanvas
Coarse
Coarse

Reputation: 91

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.
http://codepen.io/Magnesium/pen/wMwwgx
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.clearCanvas();
  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.

Upvotes: 0

Views: 84

Answers (1)

yunzen
yunzen

Reputation: 33449

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

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

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

Upvotes: 2

Related Questions