HTML5 Canvas Challenge - html

Question

I am creating an HTML5 app that will display a bunch of shapes in different colors. I am having trouble display more than one of any shape.
Here is a JSFiddle link to my project: http://jsfiddle.net/tithos/3uyLc/
Here is one of the things I tried:
$("#go").click(function() {
var number = $("#number option:selected").val();
var shape = $("#shape option:selected").val();
var size = $("#size option:selected").val();
var offset = size;
var i = 0;
var shift = 0;
while(i < number){
switch(shape){
case '1':
console.log(shift);
square((offset+shift), size);
shift = (shift + size);
break;
case '2':
circle(offset, size);
break;
case '3':
triangle(offset, size);
break;
}
i++;
}
});
This, when repeated 16 times, gives me "0121212121212121212121212121212" in the concole. It is concatenating, not adding. Why?
Any help or insights are welcome
Thanks,
Tim

Answer 1

Since .val() returns a string you are using + operator between two strings, which is the concatenation operator. Use parseInt to convert a string to integer.

Answer 2

In the first few lines, you need to parseInt from each of the .val() functions. So:
var number = $("#number option:selected").val();
var shape = $("#shape option:selected").val();
var size = $("#size option:selected").val();
becomes
var number = parseInt($("#number option:selected").val());
var shape = $("#shape option:selected").val();
var size = parseInt($("#size option:selected").val());
but the size and "offset" calculations are all done in the wrong place. they need to be done in the main loop while the drawShape methods each have the task of drawing a given shape in a given location of a specified size. http://jsfiddle.net/3uyLc/39/
Here's the fixed code:
jQuery.noConflict();
(function($) {
$("#clear").click(function() {
console.log("clear!");
var c=document.getElementById("canvas");
var context=c.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
});
function square(offset, size){
var color = $("#color option:selected").val();
var c=document.getElementById("canvas");
var context=c.getContext("2d");
context.fillStyle = color;
context.fillRect(offset,0,size,size);
}
function circle(offset, size){
var color = $("#color option:selected").val();
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var radius = size / 2;
var x = offset + radius;
var y = radius;
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.fillStyle = color;
context.fill();
//context.fillStyle="#ff0000";
//context.fillRect(x-1, y-1, 2, 2);
}
function triangle(offset, size){
console.log(offset);
var color = $("#color option:selected").val();
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = size;
var height = size;
// Draw a path
context.beginPath();
//top of triangle
context.moveTo(offset + width/2, 0);
//top to right
context.lineTo(offset + width, size);
//bottom of triangle
context.lineTo(offset, size);
context.closePath();
// Fill the path
context.fillStyle = color;
context.fill();
}
$("#go").click(function() {
var number = parseInt($("#number option:selected").val());
var shape = $("#shape option:selected").val();
var size = parseInt($("#size option:selected").val()) * 10;
var i = 0;
var position = 0;
var padding = size * 0.5; //leave space between the shapes 1/2 as large as the shape itself
while(i < number){
switch(shape){
case '1':
square(position, size);
break;
case '2':
circle(position, size);
break;
case '3':
triangle(position, size);
break;
}
i++;
// calculate the position of the next shape
position = position + size + padding;
}
});
})(jQuery);​