概要

画面半分をWebGLのcanvas、もう半分をChart.jsのcanvasを縦に3つ並べる、といった状態のアプリケーションを作る際にハマってしまった内容について

当初のコード

HTMLでは、このように1つのdivの中に3つのcanvasを並べていた。

index.html

<body>
    <div id="data_display">
        <canvas id="dx_canvas"></canvas> //X軸のデータを表示するキャンバス
        <canvas id="dy_canvas"></canvas> //Y軸のデータを表示するキャンバス
        <canvas id="dz_canvas"></canvas> //Z軸のデータを表示するキャンバス
    </div>
</body>

そして、これを

script.js

var dx_c = document.getElementById("dx_canvas");
data_resize('dx_canvas', 0.5, 0.3); //()内は左から順に（canvas要素、横の比率、縦の比率）
var dy_c = document.getElementById("dy_canvas");
data_resize('dy_canvas', 0.5, 0.3);
var dz_c = document.getElementById("dz_canvas");
data_resize('dz_canvas', 0.5, 0.3);

utils.js

function data_resize(id, wdpr, hdpr){
    var c = document.getElementById(id);
    c.width = window.innerWidth * wdpr;
    c.height = window.innerHeight * hdpr;
}

上記のようにJavaScript側で処理したが、うまく思い通りに反映されなかった。

解決法

どうも一つのdivの中に複数枚キャンバスを用意してしまったのがいけなかったらしい。

index.html

<body>
    <div id="dx_display">　//X軸のデータを表示
        <canvas id="dx_canvas"></canvas>
    </div>

    <div id="dy_display">　//Y軸のデータを表示
        <canvas id="dy_canvas"></canvas>
    </div>

    <div id="dz_display">　//Z軸のデータを表示
        <canvas id="dz_canvas"></canvas>
    </div>
</body>

こうすることで考えた通りの配置にすることが出来た。

まとめ

今回の挙動を見ると、Chart.jsを使用する場合は１つのブロックに1つのキャンバスにした方が良さそうです。