Responsive Canvas in Bootstrap column?

Question

I'm new to bootstrap and working on a project to help figure it out. I also don't know much LESS yet.

I have 2 columns: col-xs-3 and col-xs-9. In the 9 column, I have a canvas that I would like to retain a particular aspect ratio. I don't actually care what the aspect ratio is, as long as it's the same everywhere. Specifically, as wide as the column and a proper height for the given width.

I've tried using percentages for width and height, but even if that did work, it'd be less than ideal in a dynamic height column.

Answer 1

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 &lt;canvas&gt; 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