使用相对文件路径将图像添加到Javascript画布

Question

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 clientscript.js file is ./images/orig classic pokemon frame.png . I want to draw it on the canvas, around the text that is drawn on the very last line of this code snippet:

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

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.

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

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.

Answer 1

context isn't a global variable. As such, using it in the 'onload' function is out of it's scope.

There was nothing wrong with your src if it would work in an <img> element.