Tablet friendly drawing program: how to lock canvas down or make fullscreen-feeling

p5.js
1

Any suggestions on how to “lock” down the canvas on a mobile device? I’d like to make a drawing doodle program but most gestures drag the screen with it.

I thought I was close by using CSS to make the Canvas parent “position:fixed” - but that led to very odd scaling issues, like “mouse dragging” to make a line was also dragging the page behind, so that the actual line on the page was scaled down (but only vertically)

And fullscreen() doesn’t seem to work on mobile.

On clean way of doing this? I know there’s a lot of weird meta viewport stuff that gets some of the way there, but it seems like there should be some kind of straightforward way?

2

I am not sure, if you have the same problem, but I fixed a similar issue in a Snake game for my iPad as follows

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: fixed;
}

and in setup function

createCanvas(windowWidth, windowHeight);
3

I found it!
https://stackoverflow.com/questions/49854201/html5-issue-canvas-scrolling-when-interacting-dragging-on-ios-11-3/51652248#51652248 is the basic idea.

function stopTouchScrolling(canvas){
// Prevent scrolling when touching the canvas
document.body.addEventListener("touchstart", function (e) {
    if (e.target == canvas) {
        e.preventDefault();
    }
}, { passive: false });
document.body.addEventListener("touchend", function (e) {
    if (e.target == canvas) {
        e.preventDefault();
    }
}, { passive: false });
document.body.addEventListener("touchmove", function (e) {
    if (e.target == canvas) {
        e.preventDefault();
    }
}, { passive: false });

}

that takes the “true” DOM element for the canvas. There might be a less convoluted way of doing it but this worked for me:

//make canvasParent the div to wrap the canvas, then set the canvas ID
  createCanvas(800,800).parent("canvasParent").id("drawingCanvas");  
  stopTouchScrolling(document.getElementById('drawingCanvas'));

(thanks for the reply Milchreis, couldn’t quite get your way work, and I think when I tried similar techniques, like the fixed positioning it looked good, but somehow touch events had the wrong scaling for the “mouse” events)

1 Like