Draw on Canvas in Ionic App


#1

I have an HTML canvas that works in desktop but not on iPhone or iPad. I added the $ionicGesture to it as well, but that did not help. Looks like I am not using $ionicGesture correctly.

.controller(‘skCtrl’, function ($ionicGesture) {

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var isMouseDown = false;

canvas.onmousedown = function(e){
    isMouseDown = true;
}

canvas.onmouseup = function(e){
    isMouseDown = false;
}

canvas.onmousemove = function(e){
    if(isMouseDown === false){
        return;
    }
    var canvasPosition = canvas.getBoundingClientRect();
    var x = e.clientX - canvasPosition.left;
    var y = e.clientY - canvasPosition.top;
    ctx.fillRect(x, y, 2, 2);
};

$ionicGesture.on(‘dragstart’, onmousedown, canvas);
$ionicGesture.on(‘drag’, onmousemove, canvas);
$ionicGesture.on(‘dragend’, onmouseup, canvas);
})

Can someone please help me make this work on a device?