Vfrdtyky

I have a tile floor designer. The code allows the user to click to fill individual squares in a grid with a selected tile on the canvas or fill faster by dragging the mouse to fill. Desktop works fine but on the iPhone it only allows you to fill the grid one by one by touching.

I've tried adding listeners as well as binding but I cannot seem to get it to work. I commented out the mouse events.

/*mouse code $(canvas).bind("mousedown touchstart", function(e) {

$(canvas).bind("mousemove touchmove", function(e) {*/



$(canvas).bind("mousedown touchstart", function(e) {

$(canvas).bind("mousemove touchmove", function(e) {

  if (tileNumber != 0) {

    function fill(s, gx, gy) {

        ctx.fillStyle = s;

        if (tabTitle == "Edge" || tabTitle == "edge") {

          if (gy > h - 1) {

            ctx.fillRect(gx * size, canvas.height - edgeSize, size, edgeSize);

          }

        } else if (tabTitle == "Corner") {

          if (gx > w - 1 && gy > h - 1) {

            ctx.fillStyle = "#f7f7f7";

            ctx.fillRect(gx * size, gy * size, size, size);

            ctx.fillStyle = s;

            if (tileAlign == "top left") {

              ctx.fillRect(gx * size, gy * size, edgeSize, edgeSize);

            } else if (tileAlign == "top right") {

              ctx.fillRect((gx * size) + (size - edgeSize), gy * size, edgeSize, edgeSize);

            } else if (tileAlign == "bottom left") {

              ctx.fillRect(gx * size, (gy * size) + (size - edgeSize), edgeSize, edgeSize);

            } else if (tileAlign == "bottom right") {

              ctx.fillRect((gx * size) + (size - edgeSize), (gy * size) + (size - edgeSize), edgeSize, edgeSize);

            } else {

              ctx.fillRect(gx * size, gy * size, edgeSize, edgeSize);

            };

          }

        } else {

          ctx.fillRect(gx * size, gy * size, size, size);

        };

        ctx.fillStyle = "#000000"

        ctx.fillStyle = ctx.createPattern(base_image, "repeat");

        ctx.fillRect(gx * size, gy * size, size, size);

        ctx.strokeRect(gx * size, gy * size, size, size);

    }

    // reset

    prodIdDetail = "";



    // get mouse click position

    var mx = e.offsetX;

    var my = e.offsetY;



    // calculate grid square numbers

    var gx = ~~ (mx / size);

    var gy = ~~ (my / size);



    fill(fillTile, gx, gy);



    // populate my dictionary with tile locations

    if (tabTitle == "Edge" || tabTitle == "edge") {

      if (gy > h - 1) {

        gridModel[gx + "." + gy + ".edge"] = properName;

      }

    } else {

      gridModel[gx + "." + gy] = properName;

    };





    // dubugging

    //console.log("Down")

  };

});

});