Canvas - background not loading in animation

Dev Shed Forums Sponsor:

November 22nd, 2012, 09:36 PM

Grandum

Registered User

Join Date: Nov 2012

Posts: 6

Time spent in forums: 1 h 41 m 35 sec
Reputation 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:

Original - Code
window.addEventListener("load", init);

window.addEventListener("load", init);

November 23rd, 2012, 07:05 PM

Grandum

Registered User

Join Date: Nov 2012

Posts: 6

Time spent in forums: 1 h 41 m 35 sec
Reputation Power: 0

$15 paypal reward to anyone who can solve this

November 24th, 2012, 11:38 AM

Crptonic26

Registered User

Join Date: Nov 2012

Posts: 1

Time spent in forums: 2 h 34 m 8 sec
Reputation 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.

Canvas - background not loading in animation

Developer Shed Advertisers and Affiliates