Canvas doesn't work well with bootstrap

Question

Hi i have problem with the tag Canvas. I'm using bootstrap and i want create a canvas with an image where i can draw a dots after click with the mouse but because i'm using bootstrap the canvas area stretch and the dots are not in the same place i have click with the mouse

$().ready(function() {
  showImage();

  $("#image").click(function(e) {
    getMousePositionAtClick(e);
  });


  function showImage() {
    var canvas = document.getElementById('image');
    var ctx = canvas.getContext('2d');

    var img = new Image();
    img.src = 'images/Piantina.jpg';
    img.onload = function() {

      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
    };
  }

  function getMousePositionAtClick(e) {
    var rect = image.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;

    alert(rect.left);
    alert(rect.top);
    drawPoint(x, y);
  }

  function drawPoint(x, y) {
    var ctx = document.getElementById("image").getContext("2d");
    ctx.fillStyle = "#000";
    ctx.beginPath();
    ctx.arc(x, y, 3, 0, Math.PI * 2, true);
    ctx.fill();
  }
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-8" id="columnCanvas">
  <div class="card card-body">
    <canvas id="image"></canvas>
  </div>
</div>

The problem is Bootstrap is designed to be responsive, so all layouts are block sized, problem is Canvas element is not a dynamically sized control, but if we decide a size we can do something like -> ` — Keith, Jul 16 '18 at 13:30

score 1 · Accepted Answer · answered Jul 16 '18 at 13:39

As mentioned in comments above, a Canvas element is not responsive. Bootstrap on the other hand is meant to be responsive,. So to stop the scaling we can set the size. Looking at the spec for Canvas, the default size if not specified is 300px / 150px.. So in theory if we just set the Canvas CSS size to 300px/150px, this will also prevent the scaling, below is an example.

$().ready(function() {
  showImage();

  $("#image").click(function(e) {
    getMousePositionAtClick(e);
  });


  function showImage() {
    var canvas = document.getElementById('image');
    var ctx = canvas.getContext('2d');

    var img = new Image();
    img.src = 'images/Piantina.jpg';
    img.onload = function() {

      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
    };
  }

  function getMousePositionAtClick(e) {
    var rect = image.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;

    alert(rect.left);
    alert(rect.top);
    drawPoint(x, y);
  }

  function drawPoint(x, y) {
    var ctx = document.getElementById("image").getContext("2d");
    ctx.fillStyle = "#000";
    ctx.beginPath();
    ctx.arc(x, y, 3, 0, Math.PI * 2, true);
    ctx.fill();
  }
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-8" id="columnCanvas">
  <div class="card card-body">
    <canvas id="image" style="width:300px;height:150px"></canvas>
  </div>
</div>

Canvas doesn't work well with bootstrap

1 Answers1