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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy canvas - image loading

    So I'm creating a game and decided to use a canvas for the map. The map is a big pictures 500kb+ (6400x6400px) and the canvas size is 320x320 so I am displaying only part of the image at a time and have the page reload on button click for database purposes.

    What I'd like help with is performance. Currently it's taking a few secs to reload every time and it seems that it causes some cpu strain (can't switch tabs while loading).

    Could I stop the canvas from reloading the image each time the page is reloaded and if so then how?
    Can I make the canvas only load a part of the image, if so then how?

    If neither is possible any tips, solutions how to solve the performance issues?

  • #2
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Odd, i'm messing around with canvas at the moment too. A poker game. I have all the cards as one image at about 1.2mb and it only glitches out on me the 1st time. Once the image has loaded it should be on your computer (or client computer) and shouldn't have to reload o.O I'v also not noticed any other strains on performance.
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hmm, maybe it's the code I'm using (I'm not very good at javascript).
    Code:
    <script type="text/javascript">
    var xLoc=<?php echo"$player[xLoc]";?>; var yLoc=<?php echo "$player[yLoc]";?>; var xSq; var ySq;
    if (xLoc>0)
    {xSq=xLoc*64;}
    else {xSq=0;}
    if (yLoc>0)
    { ySq=yLoc*64;}
    else {ySq=0;}
    $('#loader').show();
    var can=document.getElementById("map");
    var cxt=can.getContext("2d");
    var img=new Image();
    window.onload = function(){
    cxt.drawImage(img,0,0,320,320,0,0,320,320);
    cxt.fillStyle="rgba(255, 255, 0, 0.4)";
    cxt.fillRect(xSq,ySq,63,63);
    $('#loader').hide();};
    img.src="menu/maps/map_images/map.png";
    
    </script>
    Anyone sees problems :S?
    Last edited by Fascionas; 07-13-2011 at 02:26 PM.

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Bump, so no help?


  •  

    Tags for this Thread

    Posting Permissions

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