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 {
  margin-left: 20px;
  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();
    }
})();