title: Canvas within a responsive materialize css div
body: <p>I'm trying to implement whiteboard with pencil and eraser using HTML 5 canvas and JavaScript. It is working fine if I place canvas tag with in the body tag. But if I move the same canvas tag inside a responsive row of materialize css row, its not adapting as per parent div. Pencil and Eraser are not working. Can you suggest me how can I make it responsive?</p>
  <p>Here is the js code</p>
  <pre><code>$(document)
      .ready(
          function () {
              var canvas = document.getElementById('canvas');
              var ctx = canvas.getContext('2d');
  
              var canvasx = $(canvas).offset().left;
              var canvasy = $(canvas).offset().top;
              var last_mousex = last_mousey = 0;
              var mousex = mousey = 0;
              var mousedown = false;
              var tooltype = 'draw';
  
              // Mousedown
              $(canvas).on('mousedown', function (e) {
                  last_mousex = mousex = parseInt(e.clientX - canvasx);
                  last_mousey = mousey = parseInt(e.clientY - canvasy);
                  mousedown = true;
              });
  
              // Mouseup
              $(canvas).on('mouseup', function (e) {
                  mousedown = false;
              });
  
              // Mousemove
              $(canvas)
                  .on(
                      'mousemove',
                      function (e) {
                          mousex = parseInt(e.clientX - canvasx);
                          mousey = parseInt(e.clientY - canvasy);
                          if (mousedown) {
                              ctx.beginPath();
                              if (tooltype == 'draw') {
                                  ctx.globalCompositeOperation = 'source-over';
                                  ctx.strokeStyle = 'black';
                                  ctx.lineWidth = 3;
                              } else {
                                  ctx.globalCompositeOperation = 'destination-out';
                                  ctx.lineWidth = 10;
                              }
                              ctx
                                  .moveTo(last_mousex,
                                      last_mousey);
                              ctx.lineTo(mousex, mousey);
                              ctx.lineJoin = ctx.lineCap = 'round';
                              ctx.stroke();
                          }
                          last_mousex = mousex;
                          last_mousey = mousey;
  
                      });
  
  
              use_tool = function (tool) {
                  tooltype = tool;
              }
          });
  </code></pre>
  <p>Below is the css</p>
  <pre><code>#canvas {
      cursor: crosshair;
      border: 1px solid #000000;
  }
  </code></pre>
  <p>Below is html grid</p>
  <pre><code>&lt;div id=&quot;whiteboard-container&quot; class=&quot;row&quot;&gt;
      &lt;div class=&quot;center col s12&quot;&gt;
          &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
          &lt;input type=&quot;button&quot; value=&quot;draw&quot; onclick=&quot;use_tool('draw');&quot; /&gt; &lt;input
                      type=&quot;button&quot; value=&quot;erase&quot; onclick=&quot;use_tool('erase');&quot; /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>How can I make it work within the div?</p>