HTML5 Canvas Challenge

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

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

Answer 2

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.