Отзывчивый холст для разных устройств

Question

Я хочу установить ширину полотна как ширину div. Контейнер canvas будет изменяться в зависимости от ширины браузера.

<div class="canvas-container" width=100% align="center"> 
    <canvas id="Canvas"></canvas> 
</div> 

Answer 1

Используйте window.resize событие и re-draw холст элементы на каждом изменить размер события (В обработчике)

Попробуйте это:

(function() { 
 
    var canvas = document.getElementById('canvas'), 
 
    context = canvas.getContext('2d'); 
 
    window.addEventListener('resize', resizeCanvas, false); 
 

 
    function resizeCanvas() { 
 
    canvas.width = window.innerWidth; 
 
    canvas.height = window.innerHeight; 
 
    context.fillRect(10, 10, canvas.width - 20, canvas.height - 20); 
 
    } 
 
    resizeCanvas(); 
 
})();

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
canvas { 
 
    display: block; 
 
    background: #eee; 
 
}

<canvas id="canvas"></canvas>