canvas.drawImage doesn't work

Hello, I'm new to javascript and html5.
I've been having problems with some simple(?) lines of code.

var ctex;
var totalX = 400;
var totalY = 300;

var racpad = new Image();
racpad.src = 'Imgs/paddle.gif';
var brixadow = new Image();
brixadow.src = 'Imgs/brickLight.gif';

function initCnv()
{
canvas = document.getElementById('canvas01');
ctex = canvas.getContext('2d');
AppStep();
}

function clearcv(x)
{
ctex.clearRect(0, 0, totalX, totalY);
ctex.fillStyle = x;
ctex.beginPath();
ctex.rect(0, 0, totalX, totalY);
ctex.closePath();
ctex.fill();
}

function AppStep()
{
clearcv('black');
ctex.drawImage(racpad, totalX/2, totalY-50);
}


What I'm trying to do is to simply turn the canvas black and show a small gif on it. Upon executing initCnv(), the canvas turns black as it should, while the sprite image doesn't show up at all.
I can't figure out what's going on, I scoured the code for syntax errors, even tried other image formats but to no avail. Image paths are also correct.

Maybe the problem's an extremely noobish one, but I still couldn't get a clue, so I thought I'd ask for help around here.

Thanks for your time!:)

Is it possible for you to upload the page somewhere and give us the URL? From the code you provided to us I can not see the problem.

Here it is.
http://212-2393.gr-host.net/html5/magic01.html

move ctex.drawImage() (or an upstream trigger) to an onload handler for your image.
if the images has not loaded when the script call drawImage(), it cannot possibly work.

It was a matter of 2 seconds with Firebug. You have an exception in the method AppStep()

paddley is not defined

Sorry for the late reply. Thank you all for your concern, guys.:)

Weird, that 'paddley' variable was in another external .js file but I didn't use it for the code in question. I deleted the reference to the file but the problem persists.

My guess is that the 'image.src' doesn't load for some reason. I tried with

racpad.onload() = AppStep();

so that AppStep() would fire when the image element would load, but it did nothing. Maybe something with the syntax, I'm still looking into it.
Is there a way to make jscript wait for images (or elements in general) to load, then proceed with the rest of the code?

Yes, something with the syntax :-)

racpad.onload = AppStep;

Your images are 404 for starters.

Solved.

Just adding 'java/' (the dir holding the js files) to the image paths in the javascript did the trick. It was as if the image paths inside the js file had to be relative to the html file including it (they weren't in the same directory), and not to the js file itself.

I had never observed this quirk with relative paths before.

Yes, the relative paths refer to the current document, which is the HTML. If you use <script> with a javascript in a different folder, all javascript paths refer to the path of the document/HTML and not to the path of the javascript

I'll keep that in mind from now on.:thumbsup: