JSFiddle - React, Tailwind, and code Playground
by phildo
HTML
<!-- assume canvas width/height are explicitly set to window size on resize events -->
<canvas id="c" style="width:100px; height:100px; position:fixed; top:0px; left:0px;"></canvas>JavaScript
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,100,100);
var evt_options = {capture:true,once:false,passive:false};
var handleInput = function(evt) {
/*
Handle input here. Needs to be responsive, realtime, immediate, and accurate.
*/
console.log(evt.offsetX+","+evt.offsetY);
/*
One option: test if input x,y is in "launch webpage" hitbox, call launch from here.
Won't work, because this is a response to a "touchstart" event, which will get blocked by popup blockers.
*/
//if(evtWithinHitbox(evt)) launch(evt);
/*
This is required to _truly_ prevent mobile scrolling.
Swiping the finger across the screen _should not nudge_ the contents.
*/
evt.preventDefault();
};
var launch = function(evt) { window.open("www.google.com"); }
/*
Another option: change this from "touchstart" to "click".
Won't work, because preventDefault doesn't actually prevent the swipes from being interpreted as attempts to scroll
*/
c.addEventListener("touchstart", handleInput, evt_options);
/*
Another option: add an independent "click" event listener.
Won't work, because the touchstart preventDefault will result in this not being called at all.
*/
//c.addEventListener("click", launch, evt_options);
/*
A final option, which isn't shown here: add a div element on top of the canvas element positioned atop the launch hit zone, and register a click event on THAT. This WORKS, however you can still do the partial scroll/zoom if your input starts within this hitbox
*/