Html Question posted in
Some basic documentation can be found here.

Prevent unwanted user interactions on HTML canvas

I am creating a game using JavaScript an HTML canvas on my webpage. I want to make the experience as smooth as possible, so I want to try and prevent any user actions, eg. scrolling, zooming, selection. I also want it to work across different browsers.

My experience with trying to fix this is that HTML <meta> tags haven’t really helped and JavaScript solutions have most been pretty clunky, which is not really the solution I’m after.

Here is some CSS code that I have tried to use. Some of it works but there are still lots of issues with scrolling, zooming etc. and lots of other edge cases.

body, html, #canvas {
  width: 100%; 
  height: 100%;
  pointer-events: none; 
  touch-action: none;
  zoom: none; 
  -webkit-zoom-in: none; 
  -webkit-zoom-out: none;
  scroll: none; 
  scrollbar: none;
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  -webkit-user-select: none; 
  user-select: none;
}

Is there any way to just disable all user interactions and then start again from scratch?

Tags:

2

Answers


  1. 0

    Ok so here is a few tricky ways to do it, depending on what device are you targeting.

    If you wanna target the mobile device the head meta viewport should work.

    As described in this Stack overflow question How can I "disable" zoom on a mobile web page?.

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

    But if you wanna target all devices like PC, Mobile and so on…. You will need to list all the events in javascript and do preventDefault on those events.

    I would strongly recommend using some library for games (as mention in the original post comment) Phaser is a good one. Or if you wanna go the hard way you can always grab three.js library and go all out.

    I hope this one helped you a little bit.

    Login or Signup to reply.
  2. 0

    To disable all user interactions such as scrolling, zooming, and selection, you can use the combined approach of CSS and JavaScript. It will help achieve this across different browsers.

    Explanation:

    1. CSS:
      • Sets overflow: hidden on html and body to prevent scrolling.
      • Disables touch actions with touch-action: none.
      • Prevents text selection with user-select: none.
    html, body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Disable scrolling */
    height: 100%;
    width: 100%;
    touch-action: none; /* Disable touch gestures like zooming and scrolling */
    -ms-touch-action: none;
    -webkit-user-select: none; /* Disable text selection */
    user-select: none;
}

#canvas {
    display: block; /* Remove default inline-block space */
    position: fixed; /* Fix position to avoid scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
    1. JavaScript:
      • Adds event listeners to prevent default actions for touch move (touchmove), keydown events for specific keys (like arrow keys and spacebar), and the right-click context menu.
      • Ensures the canvas element always resizes to the full window size both initially and on window resize events.
    // Prevent default actions for specified events
document.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, { passive: false });

document.addEventListener('keydown', function(e) {
    // Disabling key events such as arrow keys, spacebar, PgUp, PgDn, etc.
    let keys = [32, 37, 38, 39, 40]; // Space and arrow keys
    if (keys.includes(e.keyCode)) {
        e.preventDefault();
    }
});

// Prevent right-click context menu
document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
});

window.addEventListener("resize", function() {
    // Ensure canvas resizes correctly with the window
    let canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

// Initial resize to full screen
let canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search