小さいcanvasをレスポンシブに配置するテスト
こんなのできる．一色ずつcanvas作成
要bootstrap4，jQuery
（任意）
chroma.jsライブラリ読み込み
<!--chroma.jsライブラリ読み込み-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js"></script>
スタイルシート作成（レスポンシブ用）
<style>
.wrapper{
width: 100%;
height: 100%;
}</style>
canvasの外側のDIV作成 wrapperクラスのサイズ
<div id="scales" class="wrapper"></div>
JSでcanvasを複数作成
<script>
//chroma.js使用
var scales = document.getElementById('scales');
var color_list = chroma.scale(['blue', 'crimson']);//blueからcrimsonへの色変更
var divide = 5;//色変更の分割数
var i;
//forでcanvasを複数作成
for (i = 1; i <=divide; i++) {
//canvasを次々作成
var mem_canvas;
mem_canvas = document.createElement("canvas");
mem_canvas.setAttribute("id","scaleCanvas" + i);//ID変更し複数作成可能に
//jQueryでこのDIVの縦横を取得
var w = $('.wrapper').width();
var h = $('.wrapper').height();//未使用
mem_canvas.width = w/divide;//canvas幅はwrapper÷分割数にする
mem_canvas.height = w/divide;//正方形にする
//作成するcanvasのCSS設定
mem_canvas.style.width = (100/divide) + '%';//canvasに独自のCSSを入れる
mem_canvas.style.height = 'auto';//高さはwrapper比にはできないんでautoにする
//色を塗る
var context = mem_canvas.getContext('2d');
context.fillStyle = color_list(i/divide);//
context.fillRect(0, 0, w/divide, w/divide);//正方形に塗りつぶす
//HTMLに追加
scales.appendChild(mem_canvas);//親のDIV scalesに子として追加
}
</script>
参考