다음과 같이 글자를 먼저 출력하였네요.
context.fillText("Spongebob",70,100)

그리고 나서 img.onload 가 실행될 때
context.drawImage(img, 20, 20, 300, 200);가 실행되니 글자위에 이미지를 출력하고 있습니다.

그렇다면 이미지를 출력하기 바로 직전에 글자를 출력하고 이미지를 그리면 되지 않겠습니까?
img.onload = function(){
.. 이곳에 글자를 출력해보세요.
context.drawImage(img, 20, 20, 300, 200);
}