Unexpected result with range input values

Question

This problem is (probably) not caused by the width/height being in the CSS, because it isn't. (How to avoid HTML Canvas auto-stretching) When trying to make rage inputs to demonstrate an issue I was having, I found that when using range inputs it acted stranger. It seems to be representing a larger number than what I'm passing in. Please check my code out and tell me what's causing all this. 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);
  };
}

var canvas = document.getElementById("canvas");
var rangeX = document.getElementById("x");
var rangeY = document.getElementById("y");
var size = document.getElementById("sz");
var outX = document.getElementById("ox");
var outY = document.getElementById("oy");
var outSize = document.getElementById("osz");
var out = document.getElementById("out");
var enjin = new engine(canvas); // New engine
var defalt = false;
var src = document.getElementById("src");

setInterval(function() {  // Called ~30 times a second
  enjin.clearCanvas();
  defalt ? enjin.square(50, 50, 50) : enjin.square(rangeX.value, rangeY.value, size.value);
  defalt ? out.innerHTML = "enjin.square(50, 50, 50);" : out.innerHTML = "enjin.square("+rangeX.value+", "+rangeY.value+", "+size.value+");";
  defalt ? src.innerHTML = "Using in-code values" : src.innerHTML = "Using slider values";
  outX.innerHTML = rangeX.value;
  outY.innerHTML = rangeY.value;
  outSize.innerHTML = size.value;
}, 30);

score 2 · Accepted Answer · answered Dec 01 '15 at 15:04

The values you're passing to enjin.square are strings. You need to parse them to int:

enjin.square(parseInt(rangeX.value), parseInt(rangeY.value), parseInt(size.value));

Here's a working example:

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

var canvas = document.getElementById("canvas");
var rangeX = document.getElementById("x");
var rangeY = document.getElementById("y");
var size = document.getElementById("sz");
var outX = document.getElementById("ox");
var outY = document.getElementById("oy");
var outSize = document.getElementById("osz");
var out = document.getElementById("out");
var enjin = new engine(canvas); // New engine
var defalt = false;
var src = document.getElementById("src");

setInterval(function() { // Called ~30 times a second
  enjin.clearCanvas();
  defalt ? enjin.square(50, 50, 50) : enjin.square(parseInt(rangeX.value), parseInt(rangeY.value), parseInt(size.value));
  defalt ? out.innerHTML = "enjin.square(50, 50, 50);" : out.innerHTML = "enjin.square(" + rangeX.value + ", " + rangeY.value + ", " + size.value + ");";
  defalt ? src.innerHTML = "Using in-code values" : src.innerHTML = "Using slider values";
  outX.innerHTML = rangeX.value;
  outY.innerHTML = rangeY.value;
  outSize.innerHTML = size.value;
}, 30);

#canvas {
  border: 1px solid black;
}

<canvas id='canvas' width='400' height='400'></canvas>

<br />X
<input type='range' id='x' /><span id='ox'></span>
<br />Y
<input type='range' id='y' /><span id='oy'></span>
<br />Size
<input type='range' id='sz' /><span id='osz'></span>
<br /><span id='out'></span>
<br />
<button onclick='defalt = !defalt;'>Default value toggle</button>
<span id='src'></span>

And a updated pen.

Thanks! But why did strings still work kind of? They seemed like they were acting like bigger numbers. Also, do you know why the cube gets stretched when moving to the bottom and/or right of the canvas? — Coarse, Dec 02 '15 at 02:27
Oh, actually, I do, @ProfileNameGoesHere. You _can_ pass strings to `canvas.fillRect`, and they'll just be parsed as a `Number`. However, what you're passing to the `fillRect` is `x + size`. `size` was a string. Instead of adding `x + size`, you'll end up concatenating them. So, `20 + "25"` results in `"2025"`, instead of `45`. — Cerbrus, Dec 02 '15 at 07:14

Unexpected result with range input values

1 Answers1