Как сделать холст отзывчивым

Ответ 1

Изменить ширину не так сложно. Просто удалите атрибут width из тега и добавьте width: 100%; в css для #canvas

#canvas{
  border: solid 1px blue;  
  width: 100%;
}

Изменение высоты немного сложнее: вам нужен javascript. Я использовал jQuery, потому что мне удобнее.

вам нужно удалить атрибут height из тега canvas и добавить этот script:

  <script>
  function resize(){    
    $("#canvas").outerHeight($(window).height()-$("#canvas").offset().top- Math.abs($("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
  }
  $(document).ready(function(){
    resize();
    $(window).on("resize", function(){                      
        resize();
    });
  });
  </script>

Вы можете увидеть эту скрипту: https://jsfiddle.net/1a11p3ng/3/

EDIT:

Чтобы ответить на второй вопрос. Вам нужен javascript

0) Прежде всего, я сменил ваш #border id на класс, поскольку идентификаторы должны быть уникальными для элемента внутри html-страницы (у вас не может быть 2 тега с одним и тем же идентификатором)

.border{
  border: solid 1px black;
}

#canvas{
  border: solid 1px blue;  
  width: 100%;
}

1) Изменен ваш HTML, чтобы добавить идентификаторы, где это необходимо, два входа и кнопку, чтобы установить значения

<div class="row">
  <div class="col-xs-2 col-sm-2 border">content left</div>
  <div class="col-xs-6 col-sm-6 border" id="main-content">
    <div class="row">
      <div class="col-xs-6">
        Width <input id="w-input" type="number" class="form-control">
      </div>
      <div class="col-xs-6">
        Height <input id="h-input" type="number" class="form-control">
      </div>
      <div class="col-xs-12 text-right" style="padding: 3px;">
        <button id="set-size" class="btn btn-primary">Set</button>
      </div> 
    </div>
    canvas
    <canvas id="canvas"></canvas>

  </div>
  <div class="col-xs-2 col-sm-2 border">content right</div>
</div>

2) Установите высоту и ширину холста так, чтобы она помещалась внутри контейнера

$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs( $("#canvas").outerHeight(true) - $("#canvas").outerHeight()));

3) Задайте значения форм ширины и высоты

$("#h-input").val($("#canvas").outerHeight());
$("#w-input").val($("#canvas").outerWidth());

4) Наконец, всякий раз, когда вы нажимаете кнопку, вы устанавливаете ширину и высоту холста для установленных значений. Если значение ширины больше ширины контейнера, оно вместо этого изменит размер холста на ширину контейнера (иначе он сломает ваш макет).

    $("#set-size").click(function(){
        $("#canvas").outerHeight($("#h-input").val());
        $("#canvas").outerWidth(Math.min($("#w-input").val(), $("#main-content").width()));
    });

См. полный пример здесь https://jsfiddle.net/1a11p3ng/7/

ОБНОВЛЕНИЕ 2:

Чтобы иметь полный контроль над шириной, вы можете использовать это:

<div class="container-fluid">
<div class="row">
  <div class="col-xs-2 border">content left</div>
  <div class="col-xs-8 border" id="main-content">
    <div class="row">
      <div class="col-xs-6">
        Width <input id="w-input" type="number" class="form-control">
      </div>
      <div class="col-xs-6">
        Height <input id="h-input" type="number" class="form-control">
      </div>
      <div class="col-xs-12 text-right" style="padding: 3px;">
        <button id="set-size" class="btn btn-primary">Set</button>
      </div> 
    </div>
      canvas
    <canvas id="canvas">

    </canvas>

  </div>
  <div class="col-xs-2 border">content right</div>
</div>
</div>
  <script>
   $(document).ready(function(){
    $("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs( $("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
    $("#h-input").val($("#canvas").outerHeight());
    $("#w-input").val($("#canvas").outerWidth());
    $("#set-size").click(function(){
        $("#canvas").outerHeight($("#h-input").val());
      $("#main-content").width($("#w-input").val());
      $("#canvas").outerWidth($("#main-content").width());
    });
   });
  </script>

https://jsfiddle.net/1a11p3ng/8/

левые и правые столбцы содержимого будут перемещаться выше и отбрасывать центральный div, если ширина слишком высокая, но это не может помочь, если вы используете загрузку. Это, однако, не то, что ответственно. действительно отзывчивый сайт будет адаптировать свой размер к экрану пользователя, чтобы сохранить макет, как вы планировали, без какого-либо внешнего ввода, позволяя пользователю установить любой размер, который может нарушить ваш макет, не означает создание адаптивного сайта.

Ответ 2

Вы можете получить отзывчивый холст за 3 коротких и простых шага:

1. Удалите атрибуты width и height из вашего <canvas>.

   <canvas id="responsive-canvas"></canvas>
   

2. Используя CSS, установите width вашего холста на 100%.

   #responsive-canvas {
     width: 100%;
   }
   

3. Используя JavaScript, установите высоту, равную некоторому отношению ширины.

   var canvas = document.getElementById('responsive-canvas');
   var heightRatio = 1.5;
   canvas.height = canvas.width * heightRatio;
   

Ответ 3

похоже, что он работает:

#canvas{
  border: solid 1px blue; 
  width:100%;
}

Ответ 4

<div class="outer">
 <canvas id="canvas"></canvas>
</div>    

.outer {
 position: relative;
 width: 100%;
 padding-bottom: 100%;
}

#canvas {
 position: absolute;
 width: 100%;
 height: 100%;
}

Ответ 5

расширение принятого ответа с помощью jquery

что, если вы хотите добавить больше canvas?, этот jquery.each ответьте на него

responsiveCanvas(); //first init
$(window).resize(function(){
  responsiveCanvas(); //every resizing
  stage.update(); //update the canvas, stage is object of easeljs

});
function responsiveCanvas(target){
  $(canvas).each(function(e){

    var parentWidth = $(this).parent().outerWidth();
    var parentHeight =  $(this).parent().outerHeight();
    $(this).attr('width', parentWidth);
    $(this).attr('height', parentHeight);
    console.log(parentWidth);
  })

}

он сделает всю работу за вас

почему мы не устанавливаем width или height через css или стиль? потому что он растянет ваш холст вместо того, чтобы ожидать его размера