How to prevent scroll when clicking on html canvas for the first time?

Question

I have a large canvas with an interactive Processing sketch that i want to run as soon as the page is loaded. For some reason when the user clicks on the screen (on the canvas) for the first time, the page scrolls down a tiny bit. It is annoying because the user misses the click target when interacting with the sketch for the first time (wait until text "click on any species" appears).

http://417i.com/alcazar-vegetal/

I have tried focusing the canvas element on page load, also clicking via javascript, and even preventDefault, but nothing worked.

<!DOCTYPE html>
<html>
    <head>
        <meta name="Alcazar Vegetal" CONTENT="Alcazar Vegetal">
        <title>Alcazar Vegetal</title>
    <script src="processing-1.4.1.min.js"></script>
    <script>
        document.onload = function() {
            var elem = document.getElementById("main_canvas");
            elem.click();
            elem.focus();
            elem.preventDefault();
        }
    </script>
    <style>
        canvas{border:0px;margin:0px;padding:0px;outline:none;}
        canvas:focus{outline:none;}
    </style>
    </head>
    <body bgcolor="white" style="color:rgb(20,20,20)">
    <canvas datasrc="alcazar_vegetal_viz_Pjs.pde" tabindex="1"></canvas> 
    <br>
    <br>
    </body>
</html>

Can you please try to post a [mcve] that demonstrates the problem? It's hard to test this out when you have to wait for the animation to complete every time. Does this happen with a blank canvas? What about just drawing a single shape, like a circle? — Kevin Workman, Feb 04 '18 at 02:31
Yes, you are right, i guess i wanted to show how the user misses the click target, but i will upload a simple one and update the question. — fartagaintuxedo, Feb 04 '18 at 11:10

Kevin Workman · Answer 1 · 2018-02-04T02:55:47.157

This is the correct default behavior of the browser. It has nothing to do with P5.js or even JavaScript.

Think about it this way: let's say you have a page full of buttons, and those buttons go past the bottom of the viewport. Now a user (who can't use a mouse due to accessibility issues) interacts with the page using the tab key. Pressing the tab key changes the focus. The user keeps pressing the tab key until the focus goes to a button that's below the viewport. That causes the viewport to scroll so the button is in view.

That's what's happening here. Clicking on the canvas causes it to gain the focus, and gaining the focus causes the viewport to scroll so the canvas is fully visible.

To get around this, there are a few things you can do:

Detect the focus change and manually scroll the viewport back to the top.
Try to see if there's a way to disable the default scrolling functionality. The preventScroll parameter on this page seems promising. See also: Preventing page from scrolling on focus switching and disable scrolling on input focus in javascript,
Resize your canvas so it fills the viewport without being larger than it.

If I were you I'd go with the third option, but it's really up to you. If you still can't get it working, please post a MCVE in a new question post and we'll go from there. Good luck.

I dont mind so much that the page scrolls down a bit, what i want to avoid is that it happens at user click. Thats why i tried focusing the canvas element on page load, to trigger the scroll at page load and not at user input. But neither `elem.focus()` nor `elem.click()` have worked? — fartagaintuxedo, Feb 04 '18 at 11:13
@fartagaintuxedo Okay cool. I mentioned a few different approaches. Please be more specific than saying something didn't work. I don't think it's going to be as simple as adding a single line somewhere in your sketch. You have to understand the approaches I've mentioned in order to integrate them into your code. Or you could just make your canvas smaller. — Kevin Workman, Feb 04 '18 at 16:18

How to prevent scroll when clicking on html canvas for the first time?

1 Answers1