Responsive Canvas in Bootstrap Column

Responsive Canvas in Bootstrap column?

This example works fine for me. I think you need to do two things: remember to set the width and height properties on the canvas, and then you can set the canvas width to 100% and its height to auto. It should cause the canvas to always be the full width of its container and force its height to remain in proportion.

CSS:

canvas {
  background-color: blue; 
  width: 100%;
  height: auto;
}

HTML:

<div class="container">
      <div class="row">
        <div class="col-md-4">
            <canvas id="canvas" width="300" height="300">
              Sorry, your browser doesn't support the <canvas> element.
            </canvas>
        </div> <!-- /col-md-4 -->
        <div class="col-md-4">
            <p>item 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div> <!-- /col-md-4 -->
        <div class="col-md-4">
            <p>item 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div> <!-- /col-md-4 -->
      </div> <!-- /row -->
    </div>

JS:

$( document ).ready(function() {

    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();

});

A fiddle demo

How to make canvas responsive

To change width is not that hard. Just remove the width attribute from the tag and add width: 100%; in the css for #canvas

#canvas{
  border: solid 1px blue;  
  width: 100%;
}

Changing height is a bit harder: you need javascript. I have used jQuery because i'm more comfortable with.

you need to remove the height attribute from the canvas tag and add this script:

  <script>
  function resize(){    
    $("#canvas").outerHeight($(window).height()-$("#canvas").offset().top- Math.abs($("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
  }
  $(document).ready(function(){
    resize();
    $(window).on("resize", function(){                      
        resize();
    });
  });
  </script>

You can see this fiddle: https://jsfiddle.net/1a11p3ng/3/

EDIT:

To answer your second question. You need javascript

0) First of all i changed your #border id into a class since ids must be unique for an element inside an html page (you can't have 2 tags with the same id)

.border{
  border: solid 1px black;
}

#canvas{
  border: solid 1px blue;  
  width: 100%;
}

1) Changed your HTML to add ids where needed, two inputs and a button to set the values

<div class="row">
  <div class="col-xs-2 col-sm-2 border">content left</div>
  <div class="col-xs-6 col-sm-6 border" id="main-content">
    <div class="row">
      <div class="col-xs-6">
        Width <input id="w-input" type="number" class="form-control">
      </div>
      <div class="col-xs-6">
        Height <input id="h-input" type="number" class="form-control">
      </div>
      <div class="col-xs-12 text-right" style="padding: 3px;">
        <button id="set-size" class="btn btn-primary">Set</button>
      </div> 
    </div>
    canvas
    <canvas id="canvas"></canvas>

  </div>
  <div class="col-xs-2 col-sm-2 border">content right</div>
</div>

2) Set the canvas height and width so that it fits inside the container

$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs( $("#canvas").outerHeight(true) - $("#canvas").outerHeight()));

3) Set the values of the width and height forms

$("#h-input").val($("#canvas").outerHeight());
$("#w-input").val($("#canvas").outerWidth());

4) Finally, whenever you click on the button you set the canvas width and height to the values set. If the width value is bigger than the container's width then it will resize the canvas to the container's width instead (otherwise it will break your layout)

    $("#set-size").click(function(){
        $("#canvas").outerHeight($("#h-input").val());
        $("#canvas").outerWidth(Math.min($("#w-input").val(), $("#main-content").width()));
    });

See a full example here https://jsfiddle.net/1a11p3ng/7/

UPDATE 2:

To have full control over the width you can use this:

<div class="container-fluid">
<div class="row">
  <div class="col-xs-2 border">content left</div>
  <div class="col-xs-8 border" id="main-content">
    <div class="row">
      <div class="col-xs-6">
        Width <input id="w-input" type="number" class="form-control">
      </div>
      <div class="col-xs-6">
        Height <input id="h-input" type="number" class="form-control">
      </div>
      <div class="col-xs-12 text-right" style="padding: 3px;">
        <button id="set-size" class="btn btn-primary">Set</button>
      </div> 
    </div>
      canvas
    <canvas id="canvas">

    </canvas>

  </div>
  <div class="col-xs-2 border">content right</div>
</div>
</div>
  <script>
   $(document).ready(function(){
    $("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs( $("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
    $("#h-input").val($("#canvas").outerHeight());
    $("#w-input").val($("#canvas").outerWidth());
    $("#set-size").click(function(){
        $("#canvas").outerHeight($("#h-input").val());
      $("#main-content").width($("#w-input").val());
      $("#canvas").outerWidth($("#main-content").width());
    });
   });
  </script>

https://jsfiddle.net/1a11p3ng/8/

the content left and content right columns will move above and belove the central div if the width is too high, but this can't be helped if you are using bootstrap. This is not, however, what responsive means. a truly responsive site will adapt its size to the user screen to keep the layout as you have intended without any external input, letting the user set any size which may break your layout does not mean making a responsive site.

How to make a responsive canvas element within a div?

I think you just add this:

<div class="col-md-6 col-sm-12 p-0" id="mycanvasdiv" style="background-color:blue">
    <canvas id="mycanvas" style="width: 100%; height:100%;"></canvas>
</div>

Bootstrap Extend ChartJS canvas horizontally to match overflowing columns

I've actually got it sorted with Jquery. The columns are still responsive

$('.target').css('width', $('.source')[0].scrollWidth)

https://jsfiddle.net/gabes/tapfjkuh/6/

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ['', '', '', '', '', '', '', '', ''],
    datasets: [{
        label: "foo",
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        fill: false,
        tension: 0.3,
        datalabels: {
          align: "bottom",
          offset: 10,
        },
      },
      {
        label: "bar",
        data: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
        tension: 0.3,
        fill: "-1",
        backgroundColor: "rgba(255,193,8,0.5)",
      },
    ],
  },
  options: {
            maintainAspectRatio: false,
      }
});

$('.target').css('width', $('.source')[0].scrollWidth)

.topParent {
  
  border: 1px solid red;
}

.container {
  overflow-x: scroll;
  border: 1px solid blue;
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.target{
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='topParent'>

  <div class="container">
    <div class="row d-flex flex-nowrap source">
      <div class="col col-3">
        1 of 7
      </div>
      <div class="col col-3">
        2 of 7
      </div>
      <div class="col col-3">
        3 of 7
      </div>
      <div class="col col-3">
        4 of 7
      </div>
      <div class="col col-3">
        5 of 7
      </div>
      <div class="col col-3">
        6 of 7
      </div>
      <div class="col col-3">
        7 of 7
      </div>
    </div>
    <div class="row target">
      <div class="col">
        <canvas id='myChart' height='100px' ></canvas>
      </div>
    </div>
  </div>
</div>

Canvas doesn't work well with bootstrap

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>

Responsive Canvas in Bootstrap Column