bulma.io Responsiveness

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.min.css">
<!-- <canvas id='paint' width={250} height={250}/> -->


<div class="container">
  <p class="notification is-info">Draw on the box provided</p>
  <canvas id='paint' width={250} height={250}/>
</div>

<!-- <div class="container">
  <div class="columns">
      <div class="column">
        <p class="notification is-info">Draw on the box provided</p>
      </div>
      <div class="column">
          <canvas id='paint' width={250} height={250}/>
      </div>
  </div>
</div> -->

CSS

canvas {
  border: 1px solid #00000055;
}

.container {
  position: static;
}

JavaScript

(function setupCanvas() {

  var canvas = document.querySelector('#paint');
  var ctx = canvas.getContext('2d');

  // var sketch = document.querySelector('#sketch');
  // var sketch_style = getComputedStyle(sketch);
  // canvas.width = parseInt(sketch_style.getPropertyValue('width'));
  // canvas.height = parseInt(sketch_style.getPropertyValue('height'));

  var mouse = {
    x: 0,
    y: 0
  };
  var last_mouse = {
    x: 0,
    y: 0
  };

  /* Mouse Capturing Work */
  canvas.addEventListener('mousemove', function(e) {
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;

    mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop;
  }, false);


  /* Drawing on Paint App */
  ctx.lineWidth = 5;
  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';
  ctx.strokeStyle = 'blue';

  canvas.addEventListener('mousedown', function(e) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    canvas.addEventListener('mousemove', onPaint, false);
  }, false);

  canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false);
  }, false);

  canvas.addEventListener('mouseout', function() {
    canvas.removeEventListener('mousemove', onPaint, false);
  });

  var onPaint = function() {
    ctx.beginPath();
    ctx.moveTo(last_mouse.x, last_mouse.y);
    ctx.lineTo(mouse.x, mouse.y);
    ctx.closePath();
    ctx.stroke();
  }
})();