Canvas doesn't work well with bootstrap

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>

Solution

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>