How to make canvas responsive
<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>