Strange canvas draw behaviour

I have a CodeIgniter application that allows a business to complete certain reports online. One part of the report is that they can indicate on a vehicle where damage occurs. I've done this by having a canvas that they can draw on.

The problem is that there's some very strange behaviour when it comes to drawing the background image (the car) on which they draw their arrows to show impact etc...

Here's the Javascript (as part of the script as a whole):

    var img = new Image();
    img.src = "/intranet/images/car.png";


    context.drawImage(img, 10, 5, img.width, img.height);

This is all part of a script called vehicle_canvas.js. Now this is where the weird behaviour comes from. This script is called with

<script type="text/javascript" src="/intranet/js/vehicle_canvas.js"></script>

In a view file located /intranet/application/views/view_instruction.php

The script just wasn't drawing the vehicle image but was doing everything else correctly and then all of a sudden it worked, the reason was I'd accidently uploaded vehicle_canvas.js to a different folder /i开发者_如何转开发ntranet/pdfs/ rather than /intranet/js/. Now if I delete the script from /pdfs/ it simply won't work. /pdfs/ occurs nowhere in any of my view files or Javascript calls.

Any ideas?

Here's the document tree for reference:

/intranet/
    /pdfs/ 
    /js/  
        /application/  
            /views/  
                 view_instruction.php

---

I think you might need to strip things back to the simplest form - perhaps something cached, so make sure you do a full refresh, etc...

As for the image weirdness: perhaps it's because the image hasn't fully loaded before you try to draw it to the canvas element. You should be waiting page load (or better, image load) otherwise it'll fail. Something like:

var img = new Image();
img.onload = function(){
  context.drawImage(img, 10, 5, img.width, img.height);
}
img.src = "/intranet/images/car.png";