CODEWITHSUNDEEP
javascriptcsshtml5-canvas
dark knight
dark knight

Reputation: 85

HTML 5 canvas scroll event listener not working

i have a canvas 1 of 500w * 500h which contains the wide background image of 5000w * 500h. i wrapped the canvas with a div 500*500 to create a viewport by setting overflow:hidden so that background is loaded first but only 500w of the background is shown and the rest will be shown by scrolling the viewPort division using scrollLeft property .i added an event listener which checks if -> or <- key is pressed and scrolls the viewport accordingly. my problem is

With everything loaded and setup properly (images of background properly loaded and drawn on canvas) , when i use following code

 window.onload=function (){
//images are loaded and drawn
//necessary variables defined here    
//view is the element id of the viewport div and is also properly accessed

        window.addEventListener("keydown",function(e){
            keyPressFlag = true;
            if(e.keyCode == 39) //-> key
            {view.scrollLeft+=3;}

        });
    };

the scrolling effect is obtained. But when i try to implement the same effect following way, i the same effect is not obtained. i can see that RIGHT MOVED is logged into console, but the scrolling doesnot takeplace.

        window.onload=function (){
        //images are loaded and drawn
        //necessary variables defined here    
        //view is the element id of the viewport div and is also properly accessed
        //keyPressFlag = false; and keyPressed = 0 initially

    function move()
    {
            if(keyPressed == 37)
            {
                console.log("LEFT MOVED");
            view.scrollLeft -=3;
            }
            if(keyPressed == 39)
            {
                console.log("RIGHT MOVED");
            view.scrollRight +=3;
            }

    }
window.addEventListener("keydown",function(e){
    console.log("Key Pressed");
    keyPressFlag = true;
    keyPressed = e.keyCode;
    move();

});

window.addEventListener("keyup",function(e){
    console.log("key Released");
    keyPressFlag = false;
});
};

what should i do to make the background scroll by calling move function when the event is triggered?

Upvotes: 3

Views: 3053

Answers (1)

user1693593
user1693593

Reputation:

Instead of using wrapper, image and fiddling with scroll bar position, you could instead set the background of the canvas element using CSS combined with background-position which you could control with the keys.

Just remember that it's important to set background-position as an inline style attribute on the element, or it won't be available through the style property.

Example:

This example uses two helper functions, one to parse the string. It will split the two positions and strip off the "px" unit at the end. The other will use the new position you give for x and format it back to a valid css position.

var canvas = document.getElementById("canvas"),
    cs = canvas.style;          // cache style reference

function move(keyPressed) {
  if (keyPressed === 37) {
    setX(getX() - 3);           // update style (see helper functions below)
  }
  else if (keyPressed === 39) {
    setX(getX() + 3);
  }
}

window.addEventListener("keydown", function(e) {
  e.preventDefault();
  move(e.keyCode);
});

// helper functions to parse the css string, and to update it
function getX() {return parseInt(cs.backgroundPosition.split(" ")[0], 10)}
function setX(x) {cs.backgroundPosition = x + "px 0px"}
#canvas {
  border: 1px solid blue;
  background: url(http://i.imgur.com/BoqJ7Wg.jpg) no-repeat;
}
<canvas style="background-position:0 0" id=canvas width=500 height=500></canvas>

Just add position check if out of boundary.

Upvotes: 1

Related Questions