CODEWITHSUNDEEP
javascriptcanvasmicrosoft-edge
user2531284
user2531284

Reputation: 184

HTML5 pointermove/touchmove not working in Microsoft Edge

I'm working on something which is more or less a drawing app. I need to support Microsoft Edge and there's the problem. As soon as you want to catch the touchmove or pointermove event, Edge tries to scroll (even if it's not possible). Here's an example. Just try to draw something there (touch/pen), mouse works perfectly even in Edge. In every other browser (except maybe IE) it works very well.

I have no idea why IE is ignoring the preventDefault() function. Has someone an idea?

Sample: https://jsfiddle.net/ryqagkeb/

Actually doesn't work with my Surface Pro & Surface Pen on Chrome and Edge.

canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
start = 0;
canvas.onpointerdown = function(evt) {
    start = 1;
}

canvas.onpointermove = function(evt) {
    if(start) {
        ctx.fillRect(evt.clientX, evt.clientY, 5,5);
    }
}

canvas.onpointerup = function(evt) {
    start = 0;
}

Upvotes: 2

Views: 2176

Answers (1)

user2531284
user2531284

Reputation: 184

So I think I've found the solution myself and posting it now because I think it's pretty helpful. It seems the CSS property "touch-action" can solve the problem.

Setting:

canvas {
    touch-action: none;
}

It seems like it fixes the problem.

Upvotes: 6

Related Questions