#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    16
    Rep Power
    0

    Canvas - background not loading in animation - $15 paypal reward for solving this


    Hi guys,

    I would really appreciate it if you could help me out here:

    I am having trouble with a canvas of mine. Essentially the background grid of images isn't loading when I'm animating the canvas.

    If I use the exact same function to load the canvas without the animation then it loads just fine, so I really don't know what the problem is.

    you can remove this line:

    window.addEventListener("load", init);

    to avoid triggering the animation. Then you can see that so far everything is loading just fine - it loads up a grid, an icon on the grid representing a car and everything is swell.

    but when I call the same function from the loop in my animation it refuses to load. Any idea why that is? (loadtiles)

    3 images missing here - a transparant gif (50x50), a black png (50x50) and a transparant gif with a little car on it. (19x19) incase you want to test it. This is how far I've gotten so far:

    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    canvas.test { background:url(lotsallasers.jpg); border: 1px solid #9C9898; border:1px solid #c3c3c3; }
    body { margin: 0px; padding: 0px; }
    </style>
    </head>
    <body>
    <canvas class="test" id="myDrawingCanvas" width="800" height="700">
    Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script>

    //Declare variables

    var imgs = new Array();
    var wehey = 0;
    var cellswide=16;

    var cellshigh=11;

    var thisWidth = 50;
    var thisHeight = 50;
    var goooo = 0;
    var i = 0;
    var carwidth = 19;
    var carheight = 19;
    var parkedx = 225;
    var parkedy = 325;
    var carx = parkedx - (carwidth/2)-1;
    var cary = parkedy - (carheight/2)-1;
    var currentlyfacing = 110;
    var counter = 0;
    var TO_RADIANS = Math.PI/180;

    // load the different tiles

    for (var tilegenerator=0;tilegenerator<cellswide*cellshigh;tilegenerator++)
    {
    if(tilegenerator==100)
    {
    imgs[tilegenerator] = 'trans.gif';
    }
    else
    {
    imgs[tilegenerator] = 'black0.png';
    }
    }

    Canvas = document.getElementById('myDrawingCanvas');
    context = Canvas.getContext('2d');

    Canvas.addEventListener("mousedown", onCanvasClick, false);
    Code:
    window.addEventListener("load", init);


    var carimg = new Image();
    carimg.src = 'car.gif';

    loadtiles();

    carimg.onload = function() {
    context.drawImage(carimg, carx, cary);
    };

    function init(){
    setInterval(loop, 1000/30);
    }

    function loop() {
    context.clearRect(0,0,Canvas.width, Canvas.height);
    loadtiles();
    drawRotatedImage(carimg,parkedx,parkedy,counter);
    counter+=8;
    }
    function drawRotatedImage(image, x, y, angle) {
    context.save();
    context.translate(x, y);
    context.rotate(angle * TO_RADIANS);
    context.drawImage(image, -(image.width/2), -(image.height/2));
    context.restore();
    }
    function onCanvasClick(clickeds) {
    clickedsss = turncar(clickeds);
    alert('swingleft: ' + clickedsss[0] + 'swingright: ' + clickedsss[1]);
    }

    function turncar(turnto) {
    swingright = 0;
    swingleft = 0;
    xyturn = getCursorPosition(turnto);
    centeredx = xyturn[0] - parkedx;
    centeredy = xyturn[1] - parkedy;
    turncircle = (Math.atan2(centeredy,centeredx) * (180/Math.PI))+180;

    if(currentlyfacing < 180 && turncircle > currentlyfacing){
    swingleft = currentlyfacing + 360 - turncircle;
    }
    else{
    swingleft = currentlyfacing - turncircle;
    }

    if(currentlyfacing > 180 && turncircle < currentlyfacing){
    swingright = 360 - currentlyfacing + turncircle;
    }
    else{
    swingright = turncircle - currentlyfacing;
    }

    if(swingright>180){
    swingright = 0;
    }
    else{
    swingleft = 0;
    }

    return [swingleft,swingright];
    }

    function loadtiles() {
    for(cellwidthcount=0;cellwidthcount<cellswide*cellshigh;cellwidthcount++){
    var imgObj = new Image();
    imgObj.onload = function() {
    if(wehey == cellswide * thisWidth){
    wehey = 0;
    goooo = goooo + thisHeight;
    }
    context.drawImage(this, wehey, goooo);
    wehey = wehey + thisWidth;
    }
    imgObj.src = imgs[i];
    i++;
    }
    }
    function getCursorPosition(e) {
    var clickx;
    var clicky;
    if (e.pageX != undefined && e.pageY != undefined) {
    clickx = e.pageX;
    clicky = e.pageY;
    }
    else {
    clickx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    clicky = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    clickx -= Canvas.offsetLeft;
    clicky -= Canvas.offsetTop;
    return [clickx,clicky];
    }
    </script>
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    16
    Rep Power
    0
    $15 paypal reward to anyone who can solve this
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    1
    Rep Power
    0
    To address the primary issue, you're not resetting your index variables in loadtiles.

    adding
    Code:
    i=0;
    wehey = 0;
    goooo = 0;
    as the first lines in your loadtiles function will reload the tile map as you have defined.


    The second issue you're going to run into is that the map flickers every time the tilemap is redrawn using your code. (at least in chrome).

    This is probably because your reloading the images, instead of reusing the images.

    Generally speaking, you should only ever need to load a resource ONCE, unless the resource is changing outside of your implementation during execution; Otherwise you're doing a lot of overhead every cycle that you don't need to be doing, and creating unwanted side effects (flicker, lag...)

    lastly, you'll notice that sometimes (if not always) you have a layer problem here as well. in my browser the car is being loaded before the tiles, so it has been obscured.

    in canvas drawing, the image is layered by the order of the drawing operations. You're using a lot of onLoad callbacks, which can execute out of order depending on a few things like network latency.. The objects may be loaded out of order, and thusly drawn out of order.

    What you should do is create a resource array. load each object/image into that array ONCE, at program init, then populate your imgs array with references from the resource array we just created. then draw from the imgs array.

    My advice is to re-organize your program a little bit. Encapsulate the various phases of your program into stand alone functions that don't overlap as much, and would clean up your code into more readable chunks. and allow you to trace the program execution a little faster, allowing you to isolate the parts that are causing problems.

    My rule of thumb is once your done coding a part of your program, you shouldn't ever have to change it again (in an ideal world), so you shouldn't have to look at it while your authoring the next part.

IMN logo majestic logo threadwatch logo seochat tools logo