adding image to Javascript canvas using relative file path
<p>I feel like there is a very simple way to do this, yet I can't find it.  I have an image whose relative path to my <code>clientscript.js</code> file is <code>./images/orig classic pokemon frame.png</code>.  I want to draw it on the canvas, around the text that is drawn on the very last line of this code snippet:</p>

<pre><code>function render(context) {
    context.fillStyle = 'black';
    context.strokeStyle = 'black';
    context.save();
    var imgFrame = new Image();
    imgFrame.src = './images/origclassicpokemonframe.png';
    imgFrame.onload = function(){
        context.drawImage(imgFrame, 0, 0, 30,30);
    };
    context.font = "24px Early GameBoy";
    context.fillText("What? _____", 10, canvasHeight-44); //20 padding plus 24 line height
</code></pre>

<p>The text shows up on the canvas, but the frame never does.  Changing the dimensions or the x and y coordinates does not make a difference.  Any help is appreciated.  </p>

<p>EDIT:  Changed the filepath to <code>images/origclassicpokemonframe.PNG</code> and now the image shows on canvas in firefox, but not chrome.
help????</p>

<p>Another edit:  I can see in the console on both chrome and firefox that the HTTP request is loading it just fine but somehow it just doesn't want to draw on the canvas.  </p>