title: How to make canvas responsive
body: <p>I use bootstrap. I want the user to be able to choose the canvas size while keeping the design screen responsive within the div.</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-xs-2 col-sm-2" id="border"&gt;content left&lt;/div&gt;
    &lt;div class="col-xs-6 col-sm-6" id="border"&gt;
      Width &lt;input type="number" class="form-control"&gt;&lt;br&gt;
    Height &lt;input type="number" class="form-control"&gt;&lt;br&gt;
    canvas
    &lt;canvas id="canvas" width="500" height="300"&gt;  
    &lt;/canvas&gt;
  
    &lt;/div&gt;
    &lt;div class="col-xs-2 col-sm-2" id="border"&gt;content right&lt;/div&gt;
  </code></pre>
  
  <p>How can I limit the size of the canvas to the size of the div?</p>
  
  <p>I do not know if it will be necessary to use JavaScript.</p>
  
  <hr>
  
  <p><strong>Edit</strong></p>
  
  <p>It should be taken into account that the width and height values are entered by the user and the canvas must be in div proportional in size</p>
  
  <p><a href="https://jsfiddle.net/1a11p3ng/2/" rel="noreferrer">https://jsfiddle.net/1a11p3ng/2/</a></p>