canvasに描いた絵をtoDataURLで保存して、imgでcanvasに取り出したい

canvas id = drawareaに描いた絵をsaveボタンを押してリロードするとdrawareaに
描いた絵が表示されるアクションをしたいと思っています。

saveボタンを押すと、drawareaのurlが生成され、保存されているのは分かるのですが、
リロードした際に表示がされません。

 $("#save").on("click", function(){
var canvas = document.createElement("canvas")
var url = canvas.toDataURL();
localStorage.setItem("save", url);
});

var img = new Image();
img.src = localStorage.getItem("save");
img.onload = function(){
    var drawarea = document.getElementById("drawarea");
    var context = drawarea.getContext("2d");
    context.drawImage(img, 0, 0);
};

こんな感じで取得しようとしているのですが、表示だけ上手くいかない状況です。
どのような原因がありますでしょうか？