title: multiple canvas on same page
body: <p>How to load multiple canvas and enable drawing on it
  I have two records in database. <code>foreach</code> loop below make two canvas but I can only draw in only one canvas not on the both canvas. I should able to draw on both canvas and that is the things I want. I am looking for any help or any tips on  how should I do so that I can draw on all canvas generated dynamically.</p>
  <pre><code> &lt;body onload=&quot;init()&quot;&gt;
      @foreach($imageDrawing as $draw)
       {{$draw-&gt;id}}
          &lt;canvas  id=&quot;can&quot; width=&quot;1200&quot; height=&quot;400&quot; 
              style=&quot;position:absolute;top:10%;left:10%;border:2px solid;&quot;&gt;
          &lt;/canvas&gt;
          
          &lt;input type=&quot;text&quot; name=&quot;imgage_{{$draw-&gt;id}}&quot;
           id=&quot;draw_image&quot;&gt;
      &lt;/body&gt;
      @endforeach
  </code></pre>
  <p>Below is the js code that allows user to draw on image of canvas</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
  var canvas, ctx, flag = false,
      prevX = 0,
      currX = 0,
      prevY = 0,
      currY = 0,
      dot_flag = false;
  
  var x = &quot;red&quot;,
      y = 2;
  
  function init() {
      canvas = document.getElementById('can');
      ctx = canvas.getContext(&quot;2d&quot;);
      w = canvas.width;
      h = canvas.height;
      //
     
      base_image = new Image();
      base_image.crossOrigin = &quot;anonymous&quot;
      base_image.src = &quot;https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189&quot;
      base_image.onload = function(){
          ctx.drawImage(base_image, 0, 0,800,400);
  
    };
      canvas.addEventListener(&quot;mousemove&quot;, function (e){
          findxy('move', e)
        
          document.getElementById(&quot;draw_image&quot;).value =canvas.toDataURL()
  
      }, false);
      canvas.addEventListener(&quot;mousedown&quot;, function (e) {
          findxy('down', e)
      }, false);
      canvas.addEventListener(&quot;mouseup&quot;, function (e) {
          findxy('up', e)
      }, false);
      canvas.addEventListener(&quot;mouseout&quot;, function (e) {
          findxy('out', e)
      }, false);
  
    
  
  }
  
  function draw() {
      
      ctx.beginPath();
      ctx.moveTo(prevX, prevY);
      ctx.lineTo(currX, currY);
      ctx.strokeStyle = x;
      ctx.lineWidth = y;
      ctx.stroke();
      ctx.closePath();
  }
  
    
  
  function findxy(res, e) {
  
      
      if (res == 'down') {
          
          prevX = currX;
          prevY = currY;
          currX = e.clientX - canvas.getBoundingClientRect().left;
          currY = e.clientY - canvas.getBoundingClientRect().top;
  
          flag = true;
          dot_flag = true;
          if (dot_flag) {
              ctx.beginPath();
              ctx.fillStyle = x;
              ctx.fillRect(currX, currY, 2, 2);
              ctx.closePath();
              dot_flag = false;
          }
      }
      if (res == 'up' || res == &quot;out&quot;) {
          flag = false;
      }
      if (res == 'move') {
          if (flag) {
              prevX = currX;
              prevY = currY;
              currX = e.clientX - canvas.getBoundingClientRect().left;
              currY = e.clientY -canvas.getBoundingClientRect().top;
              draw();
  
          }
      }
  
  }
  
  &lt;/script&gt;
  </code></pre>