CODEWITHSUNDEEP
javascripthtmlcanvasscrollbar
equiman
equiman

Reputation: 8142

Prevent scrolling when do canvas.focus() into a <div> (only in IE fail)

I'm working in a proyect based on Netron (A graph editing library written in JavaScript using the HTML5 canvas element. Double-click to edit an element. Drag connection points to draw connections.) But I need to put the Canvas into a DIV to add the scrollbar possibility when the canvas is bigger than the DIV.

All works fine in Firefox, Opera, Safari, Chrome... but Internet Explorer when I scroll (for example down) and click on this area into the canvas the Scroll is reset to initial position.

It's an extraction of the failure code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dynamics</title>
    <script type="text/javascript">
        var Graph = function (element) 
        {
            this.canvas = element;
            this.canvas.focus();
            this.context = this.canvas.getContext("2d");

            this.mouseDownHandler = this.mouseDown.bind(this);
            this.canvas.addEventListener("mousedown", this.mouseDownHandler, false);
        };

        // Acciones a realizar en el canvas segun los eventos de teclado y de mouse
        Graph.prototype.dispose = function () 
        {
            if (this.canvas !== null) 
            {
                this.canvas.removeEventListener("mousedown", this.mouseDownHandler);
            }
        };

        Graph.prototype.mouseDown = function (e) 
        {
            e.preventDefault();
            this.canvas.focus(); 
        };
    </script>

    <script type="text/javascript">
        function document_load() 
        {   
            graph = new Graph(document.getElementById("canvas"));

            // Draw a Circle
            var centerX = 300;
            var centerY = 800;
            var radius = 10;

            graph.context.beginPath();
            graph.context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

            graph.context.fillStyle = "red";
            graph.context.fill();
            graph.context.lineWidth = 2;
            graph.context.strokeStyle = "black";
            graph.context.stroke();
        }
    </script>
</head>

<body onload="document_load();">
    <br/>

    <div id="canvas-div" style="width:800px;height:600px;background-color:#fff000;">
        <canvas id="canvas" tabindex="1" width="600" height="1000" style="border:solid 5px black;"></canvas>
    </div>
</body>
</html>

You can reproduce the error doing scroll down and click on red circle (or in the white are around the red circle). Yellow represent the DIV area.

EventLister is required, because is used to add elements to the canvas (example: Add Person in this page).

Sorry mi English isn't very good. Thanks for all help you may provide.

Upvotes: 2

Views: 1540

Answers (1)

equiman
equiman

Reputation: 8142

I found a solution.

Commenting the focus line.

//this.canvas.focus();

Without this instruction the canvas lose the focus then don't move the scrollbar, but the rapid access key (like ctrl+z) defined don't work. I change the other "Key" EventListener from "this.canvas" to "document" and works again.

From:

this.canvas.addEventListener("keydown", this.keyDownHandler, false);
this.canvas.addEventListener("keypress", this.keyPressHandler, false);
this.canvas.addEventListener("keyup", this.keyUpHandler, false);

To:

document.addEventListener("keydown", this.keyDownHandler, false);
document.addEventListener("keypress", this.keyPressHandler, false);
document.addEventListener("keyup", this.keyUpHandler, false);

Thanks! I hope this solution can help others!

Upvotes: 1

Related Questions