画像をクリックすると、キャンバス上にその画像を描画したいです。

canvasとjavascriptでお絵かきアプリを作成中です。

###実現したいこと
canvas上にイラストを描画⇨localstorageに保存
⇨<div id="gallery">の中に<class="">描画したイラストが作成される。
⇨#galleryの描画イラストをクリックすると、クリックした描画がcanvas上に描画される。

###発生している問題

<div id="gallery">に２つ以上描画されたイラストが書き出されるのですが、それをクリックすると、一つ前のイラストしかcanvas上に描画されないです。

２つ以上前のイラストをクリックしたら、そのイラストをcanvas上に描画したいのですが、
思うようにいきません。
申し訳ございませんが、教えていただけましたら幸いです。

###該当のソースコード

<html>
<body>
  <input type="button" id="save" value="保存">

  <canvas width="400" height="200" id="mycanvas" ></canvas>
  <div id="gallery"></div>


<script>

  var canvas = document.getElementById('mycanvas');
  var ctx = canvas.getContext('2d');


  $("#save").click(function(){
  var img = $("<img>").attr({
                width:100,
                height:50,
                src:canvas.toDataURL()
              });
  var link = $('<a>').attr({
        href: canvas.toDataURL().replace('image/png', 
        'application/octet-stream'),
        download: new Date().getTime() + '.png'});

  localStorage.setItem("images", canvas.toDataURL());


  $("#gallery").append(link.append(img.addClass("thumbnail")));
                      $(".thumbnail").click(function(){
                            $(this).attr("click",function(){
                              
                              var dataURL=localStorage.getItem('images');
                              if(dataURL){
                                var img=new Image();
                                img.onload = function(){
                                ctx.drawImage(img,0,0);
                                }
                                img.src=dataURL;
                              }
                            });
                        });
                 ctx.clearRect(0, 0, canvas.width, canvas.height);
              });

###試したこと
課題に対してアプローチしたことを記載してください

localstorageの保存データに配列をつけたりなどしたのですが、
やり方が間違っていたのか、解消出来ませんでした。

kei344

2017/08/24 17:55

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、localstorageなどについてのコードが提示されていないので、何がどう問題になっているのかわかりません。

m.ts10806

2017/08/25 00:34

getItemはあってもsetItem部分がありません。これでは画像保存のタイミングなど見ている人には分かりませんので、HTMLもあわせてなるべく全文ご提示ください。

yosuke1985

2017/08/25 14:53 編集

kei344様　ご回答を頂きまして誠にありがとうございます。また、大変失礼致しました。初めての投稿で不慣れのため、誠に申し訳ございません。コードブロックをし、更にlocalstorageのコード文を追記致しました。全コードを記載すると、量が多く、分かりづらいかと思いましたので、該当箇所だと思われるコードを改めて記載しました。これで、分かりづらいようであれば、全コードを記載しようかと思います。未熟なコードを見て頂きまして誠にありがとうございます。もう一度、ご確認頂けましたら幸いでございます。何卒、宜しくお願いいたします。

yosuke1985

2017/08/25 14:57

mts10806様　　ご回答頂きまして誠にありがとうございます。また、大変失礼致しました。localstorageの該当コードを追記し、改めて投稿致しました。恐れ入りますが、HTML文は全文を記載すると量が多くご迷惑かと思いましたので、該当箇所を記載致しました。これで、不足しているようでしたら全文を記載致します。誠に恐縮ですが、再度ご確認頂けましたら幸いに存じます。何卒、宜しくお願いいたします。