Develop Reference

PIXI - disabled preventDefault touch events not working on Android devices

Since I´m working on a project where I need to be able to drag objects around my canvas but also to scroll the entire page by dragging the actual canvas 'background' behind my PIXI Sprites, i followed the findings of this guy here:
https://github.com/pixijs/pixi.js/issues/2483 :
By default, the Pixi canvas/display-area cannot be used to scroll the
webpage that contains it. Which is important on touch screens. (eg. If
you use the rest of the web-page to pinch-zoom into the Pixi canvas,
you can become trapped and unable to zoom back out (or pan away),
because there's no non-Pixi-canvas area of the page to "grab" with
your pinch gesture).
To enable this functionality, I use autoPreventDefault. But this comes
with some undesirable side-effects, like scroll/pinch-zoom actions
over the canvas registering "taps" or clicks in a way that doesn't
make sense. (ie. I'm attempting to zoom or scroll the outer page at
that point, not interact with the Pixi canvas)
To work around that, I modify and compile my own custom version of
Pixi where I can apply preventDefault in a more granular way...
To get page-scrolling functionality it seems I only need to
preventDefault in the InteractionManager.prototype.onTouchEnd
function. Whereas autoPreventDefault will also preventDefault on 3
other events. (onMouseDown, onTouchMove, onTouchStart).
Leaving autoPreventDefault = false and applying preventDefault only to
onTouchEnd, gives me the functionality I need. But it'd be nice to not
have to customize and rebuild Pixi in this way every release. (Sorry
if there's something else I'm missing here; I don't completely
understand the event system in Pixi, or what else to do about this
scroll-touch problem)
So i disabled e.preventDefault() on 'onTouchStart' and on 'onMouseMove' but left it as is on 'onTouchEnd'
This works perfect on IOS devices but not on Android, the only exception being a Samsung A7 using Adblock browser (fails on Chrome).
Would really appreciate some help on this.
TLDR:
Disabling PIXI´s e.preventDefault on onTouchStart and onMouseMove works on IOS devices and lets me scroll the page by draggin my canvas around but not on Android devices.

My solution for that was to use
renderer.plugins.interaction.autoPreventDefault = false
This should work on iOS and Android.
Docs for autoPreventDefault reads:
Should the manager automatically prevent default browser actions.
Using PIXI 4.5.6.
Take a look at the docs:
http://pixijs.download/dev/docs/PIXI.CanvasRenderer.html#plugins
http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html

Using renderer.plugins.interaction.autoPreventDefault=true should do the trick.

Incorrect mouse event zooming in windows surface using easeljs / createjs

I have a website that uses CreateJS and canvas. Some objects have associated a click event. Works well in browsers and mobile devices, except in windows surface.
If I zoom in windows surface the click event is lost when the screen moves. Only works well when matched (0,0) to the screen.
Example:
http://intelisen.com/apok/simple.html
Zooming and moving no longer works circle click event.
Any suggestions?
Thank You

Make touch dragging work in chrome

I'm developing a web application in Chrome on a Ubuntu touchscreen laptop.
Part of this application requires that the user be able to drag across an element while the application keeps track of the path the mouse makes across the element. This works fine for dragging with the mouse, however when I drag across the element with the touchscreen Chrome just scrolls the whole page.
I tried adding event.preventDefault() into my click() function, however this does not prevent the touch drag scrolling.
var drawing = false;
document.getElementById('canvas').addEventListener('click', function(event){click(event);});
document.getElementById('canvas').addEventListener('mousemove', function(event){if(drawing) click(event);});
document.getElementById('canvas').addEventListener('touchmove', function(event){if(drawing) click(event);});
document.getElementById('canvas').addEventListener('touchstart', function(event){drawing=true;});
document.getElementById('canvas').addEventListener('mousedown', function(event){drawing=true;});
document.getElementById('canvas').addEventListener('touchend', function(event){drawing=false;});
document.getElementById('canvas').addEventListener('mouseup', function(event){drawing=false;});
I need to be able to follow the path the user drags across the touchscreen, without it scrolling the whole page.

Fabric.js canvas flickering in iPad and iPhone

When I use Fabric.js to generate canvas, there is annoying flickering when tapped with finger in iPad (mini) and iPhone (4). The flickering is like canvas goes fast to black and then white again.
Steps to reproduce:
With iPad or iPhone surf to eg. this line drawing utility:
http://jsfiddle.net/fabricjs/URWru/
(function dummy{})
Put your finger on to the canvas and lift it then back. Do this fast, as you do when clicking with mouse. The flickering occurs when finger is up. If you hold your finger a second or more on the canvas and then lift back, the flickering doesn't occur.
Why the flickering occurs and what could be done to prevent it?

This is Q&A style answer.
The solution is simple. Add this to css:
canvas {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
Ryan Grove describes the reason in yuiblog.com:
"Unfortunately, Mobile Safari has no way to distinguish between normal click subscribers and delegated click subscribers, which is when the click event is attached to a container rather than to each child of that container. As a result, a delegated click will result in the entire container being highlighted rather than just the item that was tapped, and this can be both ugly and confusing for the user."
This trick is reported to work at least: Android based browsers, iPhone Safari, iPad Safari, iPad Chrome.

Jquery-HTML5 drawing canvas on windows touch screen?

I am creating an application that allows users to draw on the screen using the HTML5 Canvas tag.
This works great when using a mouse, and I even got it working on android using jquery touch.
The problem comes when using a windows 7 or 8 tablet. The reason for why it wont work is simple, the browser tries to scroll instead of mousedown and drag.
The reason why it works on android and not windows is due to the fact that android supports ontouchstart and ontouchend while I can't get it to work on windows tablets.
So, is there any way to get the browser to stop trying to scroll and draw on the screen?
Thanks.