createPattern not returning as expected

Question

I am getting a TypeError on the variable "pattern" and my script does not execute past the marked break point. I am using the JCanvas and JQuery and all dependencies are in place. What is the reason for the error. There is a similar implementation used here.

function drawMe(thumbUrl){
  function drawThumb(){
    $("canvas").drawRect({
      //Code breaks here.
      fillStyle: pattern,
      x: 200, y: 100,
      width: 250, height: 100,
      fromCenter: false         
    });
  }

  var pattern = $("canvas").createPattern({
    source: thumbUrl,
    repeat: "repeat",
    load: drawThumb
  })

}

drawMe("http://placehold.it/100x100");

Answer 1

i think you need to change this

function drawThumb(){
    $("canvas").drawRect({
      //Code breaks here.
      fillStyle: pattern,
      x: 200, y: 100,
      width: 250, height: 100,
      fromCenter: false         
    });
  }

to this

function drawThumb(pattern){
    $("canvas").drawRect({
      //Code breaks here.
      fillStyle: pattern,
      x: 200, y: 100,
      width: 250, height: 100,
      fromCenter: false         
    });
  }