細かい処理を抜きにして、動作だけさせるのであれば、以下のように実装します。
↓を線の描画後に【$(can).on("mousemove", function (e){のif内の最後など】
JavaScript
1 window.localStorage.setItem("imageData", can.toDataURL());
↓を消去処理の後に【$("#clear_btn").on("click",function (){の最後など】
JavaScript
1 window.localStorage.setItem("imageData", null);
↓を初期化処理の最後に【</script>の上など】
JavaScript
1var imageData = window.localStorage.getItem("imageData");
2if (imageData != null) {
3 var image = new Image();
4 image.onload = function() {
5 context.drawImage(image, 0, 0);
6 };
7 image.src = imageData;
8}
※線の描画中に連続保存するので、工夫しないと動作が重いかもしれません。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。