title: Add google map in html using canvas tag
body: <p>I have a simple drawing canvas that can allow a user to draw, edit, clear and save that drawing. whenever user refreshes his page that saved drawing will appear on the screen until and unless user deletes that image I have this code which is perfectly fine. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas, ctx,
      brush = {
          x: 0,
          y: 0,
          color: '#000000',
          size: 10,
          down: false,
      },
      strokes = [],
      currentStroke = null;
  
  function redraw () {
      ctx.clearRect(0, 0, canvas.width(), canvas.height());
      ctx.lineCap = 'round';
      for (var i = 0; i &lt; strokes.length; i++) {
          var s =strokes[i];
          ctx.strokeStyle = s.color;
          ctx.lineWidth = s.size;
          ctx.beginPath();
          ctx.moveTo(s.points[0].x, s.points[0].y);
          for (var j = 0; j &lt; s.points.length; j++){
              var p = s.points[j];
              ctx.lineTo(p.x, p.y);
          }
          ctx.stroke();
      }
  
  }
  function init () {
      canvas = $('#draw');
      canvas.attr({
          width: window.innerWidth,
          height: window.innerHeight,
      });
      ctx = canvas[0].getContext('2d');
  
  
      function mouseEvent (e){
                  brush.x = e.pageX;
          brush.y = e.pageY;
  
          currentStroke.points.push({
              x: brush.x,
              y: brush.y,
  
          });
  
  
  
          redraw();
      }
      canvas.mousedown(function (e){
          brush.down = true;
  
          currentStroke = {
              color: brush.color,
              size: brush.size,
              points: [],
          };
          strokes.push(currentStroke);
  
          mouseEvent(e);
      }) .mouseup(function (e) {
          brush.down = false;
  
          mouseEvent(e);
  
          currentStroke = null;
      }) .mousemove(function (e) {
          if (brush.down)
              mouseEvent(e);
      });
  
      // check if localstorage has an array of strokes saved 
      if(localStorage.getItem('canvas_strokes')) { 
         strokes =  JSON.parse(localStorage.getItem('canvas_strokes'));
        redraw();
      }
  
    $('#save-to-local-storage').click(function () {
       localStorage.setItem('canvas_strokes', JSON.stringify(strokes)); 
      });
      $('#save-btn').click(function () {
          window.open(canvas[0].toDataURL());
      });
      $('#undo-btn').click(function (){
          strokes.pop();
          redraw();
      });
      $('#clear-btn').click(function (){
          strokes = [];
          redraw();
      });
  
      $('#color-picker').on('input', function () {
          brush.color = this.value;
      });
      $('#brush-size').on('input', function () {
          brush.size = this.value;
      });
      }
  $(init); </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.2.1.js"&gt;&lt;/script&gt;
  
  &lt;canvas id="draw"&gt;&lt;/canvas&gt;
  
  &lt;button id="save-to-local-storage"&gt;
    Save 
  &lt;/button&gt;
  
  &lt;button id="clear-btn"&gt;
    clear
  &lt;/button&gt;
  &lt;button id="undo-btn"&gt;
    undo
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I just want to add <strong>google Maps</strong> on canvas so that the user can draw on Google Maps rather than blank canvas. all other functionalities remain same. 
  here is the code </p>