# Tablet friendly drawing program: how to lock canvas down or make fullscreen-feeling
**URL:** https://discourse.processing.org/t/tablet-friendly-drawing-program-how-to-lock-canvas-down-or-make-fullscreen-feeling/24206
**Category:** p5.js
**Created:** [September 28, 2020, 9:03pm UTC](https://discourse.processing.org/t/tablet-friendly-drawing-program-how-to-lock-canvas-down-or-make-fullscreen-feeling/24206 "2020-09-28T21:03:53Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@kirkjerk](https://discourse.processing.org/u/kirkjerk)
#### Post date: [September 28, 2020, 9:03pm UTC](https://discourse.processing.org/t/tablet-friendly-drawing-program-how-to-lock-canvas-down-or-make-fullscreen-feeling/24206/1 "2020-09-28T21:03:53Z")
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?
---
### Author:  [@Milchreis](https://discourse.processing.org/u/Milchreis)
#### Post date: [September 28, 2020, 9:28pm UTC](https://discourse.processing.org/t/tablet-friendly-drawing-program-how-to-lock-canvas-down-or-make-fullscreen-feeling/24206/2 "2020-09-28T21:28:30Z")
I am not sure, if you have the same problem, but I fixed a similar issue in a [Snake game](https://github.com/Milchreis/Snake3D) for my iPad as follows
```auto
body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
position: fixed;
}
```
and in setup function
```auto
createCanvas(windowWidth, windowHeight);
```
---
### Author:  [@kirkjerk](https://discourse.processing.org/u/kirkjerk)
#### Post date: [October 1, 2020, 9:14pm UTC](https://discourse.processing.org/t/tablet-friendly-drawing-program-how-to-lock-canvas-down-or-make-fullscreen-feeling/24206/3 "2020-10-01T21:14:34Z")
I found it!
[https://stackoverflow.com/questions/49854201/html5-issue-canvas-scrolling-when-interacting-dragging-on-ios-11-3/51652248#51652248](https://stackoverflow.com/questions/49854201/html5-issue-canvas-scrolling-when-interacting-dragging-on-ios-11-3/51652248#51652248) is the basic idea.
```auto
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:
```auto
//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)