title: Why is chart.js canvas not respecting the padding of the container element?
body: <p>I am using Chart.js with a simple line chart but the width and height properties calculated by Chart.js seem to be based on the total width and height of the parent element ignoring padding.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var options = {
      maintainAspectRatio: false,
      responsive: true
  };
  
  var data = {
      labels: ["", "", "", "", "", "", ""],
      datasets: [
          {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 80, 81, 56, 55, 40]
          },
          {
              label: "My Second dataset",
              fillColor: "rgba(151,187,205,0.2)",
              strokeColor: "rgba(151,187,205,1)",
              pointColor: "rgba(151,187,205,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(151,187,205,1)",
              data: [28, 48, 40, 19, 86, 27, 90]
          }
      ]
  };
  
  var ctx1 = document.getElementById("mychart1").getContext("2d");
  var myNewChart = new Chart(ctx1).Line(data, options);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
      padding: 15px 15px 15px 15px;
      width: 300px;
      height: 200px;
      border: 1px solid black;
  }
  
  .child {
      display: inline-block;
      border: 1px solid red;
      width:100%;
      height:100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"&gt;&lt;/script&gt;
  
  
  &lt;div class='container'&gt;
      &lt;canvas id='mychart1' class='child'&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div class='container'&gt;
      &lt;div class='child'&gt;test&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/whw90pkh/" rel="noreferrer">JSFiddle</a></p>
  
  <p>The second container and child shows the behaviour I am expecting. Is this a bug with how Chart.js calculates the width and height of the canvas or am I making a styling mistake?</p>