Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image leaving traces when moving

    Hi!

    I'm playing around with JS and found a small HTML5 game tutorial that I thought would be cool to modify. (This is the outcome: http://www.lostdecadegames.com/demos...e_canvas_game/ )

    Everything is OK in the link given, but when I copied and played around with it just a little bit, I found it weird to leave traces when moving the character image.

    Maybe it's about the background tiles I implemented?
    It's really frustrating and I've no idea what is causing it...
    Could anyone explain or guide me to some useful resources to find out more about it?

    I included my modifications here:
    http://jsfiddle.net/swenn/6mWkU/

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    I didn't check all of your code, but you need to make sure to clear the whole canvas and redraw the background with every frame (i.e. interval). Otherwise you will just draw new images over the images you've drawn before.

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright. So I cleared the canvas with this line of code:
    Code:
    ctx.clearRect(0,0,canvas.width,canvas.height);
    Unfortunately it is the fault of FOR loops...
    It seems like it can't draw 10x10 tiles within a frame. I'll try to google for possible solutions...

    Thank you for your tip


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •