HTML5 Canvas is not responsive

Question

I have a main div, inside it are two div's each having a canvass. My problem is the canvass is not responsive, it overlaps when I resize the browser. please see below image.

Here is my HTML code:

            <div id="mainContainer">
                <div id="leftcolumn">
                    <h2>
                        Canvass Graph1
                    </h2>
                     <canvas id="Canvass_One"></canvas>
                </div>
                <div id="rightcolumn">
                    <h2>Canvass Graph2</h2>
                    <canvas id="Canvass_Two"></canvas>
                </div>

            </div>

CSS Code:

      #mainContainer
    {
        width:100%;
        height: 100%;     
    }

      #leftcolumn 
      {

        float:left;
        display:inline-block;
        width: -moz-calc(100% - 50%);
        width: -webkit-calc(100% - 50%);
        width: calc(100% - 50%);
        height: 100%;
        background: blue; 
    }

     #rightcolumn {

        float:left;
        display:inline-block;
        width: -moz-calc(100% - 50%);
        width: -webkit-calc(100% - 50%);
        width: calc(100% - 50%);
        height: 100%;
       background-color : red; 
     }

JS to set height and width of Canvass

    var ctx2 = $("#Canvass_One").get(0).getContext('2d');
        ctx2.canvas.height = 300;  // setting height of canvas
        ctx2.canvas.width = 560; // setting width of canvas

    var ctx1 = $("#Canvass_Two").get(0).getContext('2d');
        ctx1.canvas.height = 300;  // setting height of canvas
        ctx1.canvas.width = 560; // setting width of canvas

Canvas:

Again, my problem is when I minimized/resize the browser window , the canvass overlaps. thank you for any help. My case is that I'm not using image within my div, it's just a pure canvass with chart js framework to create a graph.

Sample data:

    var barData = {
            labels: ['CityA', 'CityB', 'CityC', 'CityD', 'CityF', 'CityG'],
            datasets: [
    {
        label: '2010 customers #',
        fillColor: '#382765',
        data: [2500, 1902, 1041, 610, 1245, 952]
    },
    {
        label: '2014 customers #',
        fillColor: '#7BC225',
        data: [3104, 1689, 1318, 589, 1199, 1436]
    }
]
};

Answer 1

The trick is to set the style width/height in combination with the attribute width/height, as the style controls display and attribute controls image.

#Canvass_One, #Canvass_Two
{
  width: 100%;
  height: 100%;
}

Note: Chart.js appears to have its own setting do deal with responsiveness like this, Chart.defaults.global.responsive = true;, so one might need to combine the two.

Here is a sample to show how it works.

Chart.defaults.global.responsive = true;

var barData = {
  labels: ['CityA', 'CityB', 'CityC', 'CityD', 'CityF', 'CityG'],
  datasets: [
    {
      label: '2010 customers #',
      fillColor: '#382765',
      data: [2500, 1902, 1041, 610, 1245, 952]
    },
    {
      label: '2014 customers #',
      fillColor: '#7BC225',
      data: [3104, 1689, 1318, 589, 1199, 1436]
    }
  ]
};

var ctx2 = $("#Canvass_One").get(0).getContext('2d');
ctx2.canvas.height = 300;  // setting height of canvas
ctx2.canvas.width = 560; // setting width of canvas
//ctx2.fillStyle = "#FF0000";
//ctx2.fillRect(10,0,450,75);
var clientsChart = new Chart(ctx2).Bar(barData); 

var ctx1 = $("#Canvass_Two").get(0).getContext('2d');
ctx1.canvas.height = 300;  // setting height of canvas
ctx1.canvas.width = 560; // setting width of canvas
ctx1.fillStyle = "#0000FF";
ctx1.fillRect(10,0,450,75);

#mainContainer
{
  width:100%;
  height: 100%;     
}

#leftcolumn 
{
  float:left;
  display:inline-block;
  width: 50%;
  height: 100%;
  background: blue; 
}

#rightcolumn
{
  float:left;
  display:inline-block;
  width: 50%;
  height: 100%;
  background-color : red; 
}
#Canvass_One, #Canvass_Two
{
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div id="mainContainer">
  <div id="leftcolumn">
    <h2>Canvass Graph1</h2>
    <canvas id="Canvass_One"></canvas>
  </div>
  <div id="rightcolumn">
    <h2>Canvass Graph2</h2>
    <canvas id="Canvass_Two"></canvas>
  </div>
</div>