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);
};
こんな感じで取得しようとしているのですが、表示だけ上手くいかない状況です。
どのような原因がありますでしょうか?
onload
がうまく働いていないのではないでしょうか。少なくとも、img.src =...
する前にonloadイベントの設定をする必要があるように思いますので、書き順を変えてみたらどうでしょうか。