Now the interesting bit. And it's surprisingly un-tricky.
The first thing is to understand there might be multiple fingers involved, and the overall effect
will the the net effect of all those fingers.
So before the loop, we reset our velocities to zero.
Inside the loop, for each finger, we check if the position is less than a third of the way across the canvas, or
more than two-thirds, and add or subtract some Quickness to the velocity as appropriate.
function MyTouchHandler (MyEvent) {
var rect = myCanvas.getBoundingClientRect();
hero.velocity_y= 0;
hero.velocity_x= 0;
for (var i=0; i < MyEvent.touches.length; i++) {
var x = MyEvent.touches[i].clientX - rect.left;
var y = MyEvent.touches[i].clientY - rect.top;
if (x > myCanvas.width * 0.66) hero.velocity_x= hero.velocity_x + Quickness;
if (x < myCanvas.width * 0.33) hero.velocity_x= hero.velocity_x - Quickness;
if (y > myCanvas.height * 0.66) hero.velocity_y= hero.velocity_x + Quickness;
if (y < myCanvas.height * 0.33) hero.velocity_y= hero.velocity_x - Quickness;
}
MyEvent.preventDefault()
}