Touch event equivalent to mouse down - fabricjs

Question

I'm trying to use a mouse:down event on canvas like:
canvas.on('mouse:down', function(options) {}
How can I use touchstart event handler?

Answer 1

I hope this helps
// TOUCH EVENTS
canvas.addEventListener("touchstart", function (e) {
e.preventDefault();
var mousePos = getTouchPos(canvas, e);
var touch = e.touches[0];
// do_mouse_click_logic(mousePos.x, mousePos.y, touch.clientX, touch.clientY);
}, false);
canvas.addEventListener("touchend", function (e) {
e.preventDefault();
var mousePos = getTouchPos(canvas, e);
// do_mouse_up_logic(mousePos.x, mousePos.y);
}, false);
canvas.addEventListener("touchmove", function (e) {
e.preventDefault();
var mousePos = getTouchPos(canvas, e);
var touch = e.touches[0];
// do_mouse_move_logic(mousePos.x, mousePos.y, touch.clientX, touch.clientY);
}, false);
function getTouchPos(canvasDom, touchEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: touchEvent.touches[0].clientX - rect.left,
y: touchEvent.touches[0].clientY - rect.top
};
}
// MOUSE EVENTS
canvas.addEventListener('mousedown', function(evt) {
evt.preventDefault();
var mousepos = get_mouse_pos(canvas, evt);
// do_mouse_click_logic(mousepos.x, mousepos.y, evt.pageX, evt.pageY);
}, false);
canvas.addEventListener('mousemove', function(evt) {
evt.preventDefault();
var mousepos = get_mouse_pos(canvas, evt);
// do_mouse_move_logic(mousepos.x, mousepos.y, evt.pageX, evt.pageY);
});
canvas.addEventListener('mouseup', function(evt) {
evt.preventDefault();
var mousepos = get_mouse_pos(canvas, evt);
// do_mouse_up_logic(mousepos.x, mousepos.y);
}, false);
function get_mouse_pos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function do_mouse_click_logic(x, y, page_x, page_y) {
// Do your stuff
}
function do_mouse_move_logic(x, y, page_x, page_y) {
// Do your stuff
}
function do_mouse_up_logic(x, y) {
// Do yuor stuff
}