[Dilettante_Pro]

<canvas id = 'c1' width='400' height='200'></canvas>
<button id = 'save' >Save</button>
<img id = 'cImg' src = ''>
<script>
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var myColor = 'black';
          var img = new Image();
          img.src =  localStorage.getItem('img');
          img.onload = function() {               
                ctx.drawImage(img, 0, 0);
          }
canvas.onmousedown = function() {
   canvas.onmousemove = function(e) {
       var x = e.offsetX,
             y = e.offsetY;
       ctx.fillStyle = myColor;
       ctx.fillRect(x - 5,y - 5,10,10);
   }
   canvas.onmouseup = function() {
      canvas.onmousemove = null;
   }
}
document.querySelector('#save').onclick = function() {
       var imageURI = canvas.toDataURL("image/jpg");
       localStorage.setItem('img',imageURI);
 //      document.querySelector('#cImg').src =  localStorage.getItem('img');
}
</script>