Почему HTML 5 Canvas не рисует содержимое изображения?

Я пытаюсь создать изображение из холста HTML 5, но это не "рендеринг" содержимого изображения с холста.

Вот код: http://jsfiddle.net/9kQPk/

Он должен быть простым, я создаю холст, устанавливаю несколько вещей и изображение с помощью функции drawImage, но когда я пытаюсь создать компонент img html, изображение с холста не появляется... Вот JS:

$('#drawing').css("visibility", "visible");         
var drawing = document.getElementById("drawing");
var con = drawing.getContext("2d");         
drawing.setAttribute("width", 500);
drawing.setAttribute("height", 200);
con.fillStyle = "#FF0000";
con.fillRect(0, 0, 500, 200);                                           
var img = new Image();
img.src = "http://www.deque.com/wbcntnt928/wp-content/dquploads/jquery_logo.png";
img.onload = function() {                
    con.drawImage(img, 0, 0, 250, 250);
};

//Generate Image
var drawing = document.getElementById("drawing");
var dataURL = drawing.toDataURL();
document.getElementById("result").src = dataURL;

Благодарю!