html5 challenge,html - HTML5 Canvas Challenge - Stack Overflow

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