Question

Ok I am stuck. I am trying to insert an image into a canvas and Chrome keeps giving me Uncaught TypeError: Type error for the onload method. Here is my javascript:

letterBase = new Image();
letterBase.onload = function() {
    context.drawImage(letterBase, 0, 0);
    console.log("drawing image");
  };
  letterBase.src = "/assets/letter/" + Character.letter + ".png";
  console.log(letterBase);

It is weird because I can see that the image is loading in the console from console.log(letterBase) but I really don’t see what is going wrong here. Any ideas?

Edit: I don’t think this is where the problem lies, but I have the code setting up the context as follows:

$(document).ready(function() {
    // some other init functions...
    canvas = document.getElementById("characterCanvas");
    context = canvas.getContext("2d");
    // ...

Answer 1

I figured out what the problem was. After setting the source and loading the images I was clearing the variable

letterBase.src = ""

which was causing the onload to fire a second time but this time with no source. Noob mistake.