title: Responsive Canvas in Bootstrap
body: <p>I'm trying to do a responsive canvas. All my tests has been doing with a 600x600 canvas and with that height and width it works OK and paint every line correctly. The problem is that I have tried this:</p>
  
  <pre><code> #myCanvas {
      background-color: #ffffff;
      border:1px solid #000000;
      min-height: 600px;
      height: 100%;
      width: 100%;
   }
  </code></pre>
  
  <p>Just for the record, myCanvas is inside a sm-col-8. </p>
  
  <p>And it looks nice on my laptop and looks nice on my phone but (because of my draw() function, because it was thinking for a square) the draw starts more like in the down-left corner (nearby) and it should start at up-right corner.</p>
  
  <p>So, I don't want to change my draw() function but what I'm looking for is to reescale the canvas size. I mean: If I'm in a laptop/tablet.. with 600x600, show it at that size, but if I'm on my phone which has 384x640 show it like 300x300? I don't know if it could be a good solution.</p>
  
  <p>My draw function: </p>
  
  <pre><code>function drawLines(lines,i,table,xtotal,ytotal){
  
      var c = document.getElementById("myCanvas");
  
      var ctx = c.getContext("2d");
  
      var xIni;
      var xFin;
      var yIni;
      var yFin;
  
      xIni = (c.width*parseInt(lines[i][1])/xtotal);
      yIni = (c.height*parseInt(lines[i][2])/ytotal);
      xFin = (c.width*parseInt(lines[i][3])/xtotal);
      yFin = (c.height*parseInt(lines[i][4])/ytotal);
  
      ctx.beginPath();
      ctx.moveTo(xIni,c.height-yIni);
      ctx.lineTo(xFin,c.height-yFin);
      ctx.lineWidth=4;
  
      ctx.strokeStyle = colorAleatorio();
  
      ctx.stroke();
  
  }
  </code></pre>