looking for bit of help with touch screen use with paper.js

[Tom Norian]

Thanks for paper.js ! I've used it to make this little color picking game: http://huecolor.herokuapp.com/ as a learning exercise

Here is the github repo link to the html and paper.js code: https://github.com/Tom2277/hue-identifier-game/blob/master/app/views/home/index.html.erb

While the game works on the desktop browsers I've tried it on, it doesn't  _quite_ work on mobile touch devices.

Mobile: Without me adding any special handlers, touching page elements off the canvas work just like a mouse click on a desktop. The Paper.js onMouseMove  also fires correctly when moving a finger across the canvas on a touchscreen.

I'd appreciate some generous pointers about how to get a screen-touch (touchstart) to trigger my existing onMouseDown function (in addition to the onMouseMove function. )

I tried to take a simple approach below with no luck:.  (preventDefault broke all click-like events on mobile, so I commented it out)

// ... portion of an init function..........

// no luck with this

    document.addEventListener('touchstart', function(event){

      // event.preventDefault();

      onMouseDown(event);

    }, false);

  }

  function onMouseMove(event) {

    initiate(); // sync with changed image on page - fires over and over though.

    //dynamically changes top square as mouse moves

    path.fillColor = raster.getAverageColor(event.point);

  }

  function onMouseDown(event) {

    // lets user select point to match

    var clickedCanvas = raster.getAverageColor(event.point);

    window.clickedValues = rgbValues(clickedCanvas);

    window.clickedColor = makeRgbString(clickedCanvas);

  }

Again, the onMouseMove works great on desktop and mobile, and the desktop onMouseDown works fine too.  I didn't mean it as a mobile app but it would be nice if it did work.

Sorry if this is the wrong place to post this sort of question and thanks if anyone feels like giving me a little hand.

cheers,  Tom

ps. if anyone if feeling really generous, any ideas on how to get my canvas displaying the changing pictures without requiring a mouse-over would be great too...thats more related to my method of using angularjs databinding to manipulate the dom without page loads though.