お絵かきアプリをLocalStorage保存し、表示できるようにしたいです

下記、ソースコードのどこに何のコードを入れればLocalStorageに保存して、
表示できるようになるでしょうか？
教えて頂けますと幸いです。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas_subject.html</title> </head> <body> <section> <h1>Canvas</h1> <nav> <button id="clear_btn">クリアー</button> </nav> <canvas id="drowarea" width="500" height="500" style="border:1px solid blue;"></canvas> </section> <script src="js/jquery-2.1.3.min.js"></script> <script> //初期化 //var canvas_mouse_event = false; //スイッチ [ true=線を引く, false=線は引かない ] ＊＊＊ //var txy = 10; //iPadなどは15＋すると良いかも //var oldX = 0; //１つ前の座標を代入するための変数 //var oldY = 0; //１つ前の座標を代入するための変数 //var bold_line = 3; //ラインの太さをここで指定 //var color = "#fff"; //ラインの色をここで指定 var canvas_mouse_event = false; var txy = 10; var oldX = 0; var oldY = 0; var bold_line = 5; var color = '#ff0' //------------------------------------------------ //var can = $("#drowarea")[0]; //CanvasElement //var context = can.getContext("2d"); //描画するための準備！ //------------------------------------------------ //上2つのスクリプトを記述します。 var can = $("#drowarea")[0]; var context = can.getContext("2d"); //MouseDown：フラグをTrue //----------------------------------------------- //$(can).on("mousedown", function(e){ //oldX = e.offsetX; //MOUSEDOWNしたX横座標取得 //oldY = e.offsetY - txy; //MOUSEDOWN Y高さ座標取得 //canvas_mouse_event=true; //}); //----------------------------------------------- //上5つのスクリプトを記述します。 $(can).on("mousedown", function(e){ oldX = e.offsetX; oldY = e.offsetY; canvas_mouse_event = true; }); //MouseMove： //---------------------------------------------- //$(can).on("mousemove", function (e){ // if(canvas_mouse_event==true){ // var px = e.offsetX; // var py = e.offsetY - txy; // context.strokeStyle = color; // context.lineWidth = bold_line; // context.beginPath(); // context.lineJoin= "round"; // context.lineCap = "round"; // context.moveTo(oldX, oldY); // context.lineTo(px, py); // context.stroke(); // context.closePath(); // oldX = px; // oldY = py; // } //}); $(can).on("mousemove", function (e){ if(canvas_mouse_event==true){ var px = e.offsetX; var py = e.offsetY; context.strokeStyle = "#ff0"; context.lineWidth = 10; context.beginPath(); context.lineJoin = "round"; context.lineCap = "round"; context.moveTo(oldX, oldY); context.lineTo(px, py); context.stroke(); context.closePath(); oldX = px; oldY = py; } }); //MouseUp：フラグをfalse //------------------------------------------------ //$(can).on("mouseup", function(e){ // canvas_mouse_event=false; //}); //------------------------------------------------ $(can).on("mouseup", function(e){ canvas_mouse_event=false; }); //クリアーボタンAction //----------------------------------------------------------------- //$("#clear_btn").on("click",function (){ // context.beginPath(); // context.clearRect(0, 0, can.width, can.height); //}); //----------------------------------------------------------------- $("clear_btn").on("click",function(){ context.beginPath(); context.clearRect(0,0, can.width, can.height); }); </script> </body> </html>

行動規範の内容に同意します

回答1件

細かい処理を抜きにして、動作だけさせるのであれば、以下のように実装します。

↓を線の描画後に【$(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}