使画布响应

Question

我已经尝试调试我的JavaScript的正确性。我似乎内部宽度和内部高度的值正确传递。但我无法获得响应式画布。

使用Javascript：

var chartW = 0.848, sliderW = 0.888;
var chartTop, chartLeft, chartWidth, chartHeight, nTools;
function draw_TeeChart() {

    var w = window.innerWidth, h = window.innerHeight;

    // Initialize Teechart
    Chart1 = new Tee.Chart("canvas");

    document.getElementById("canvas").style.position  = "relative";
    document.getElementById("canvas").width= Math.round(0.855*w);document.getElementById("canvas").height= Math.round(0.89*h);  //Chart1.bounds.x = Math.round(0.01*w);

    Chart1.bounds.x = 14;Chart1.bounds.y= 10;
    Chart1.bounds.width = Math.round(chartW*w);Chart1.bounds.height= Math.round(0.88*h);
    Chart1.legend.visible = false; Chart1.panel.transparent = true;
    Chart1.title.visible = false;Chart1.axes.bottom.title.text = " ";
    Chart1.axes.left.increment = 1; Chart1.axes.bottom.increment = 0.50;
    Chart1.walls.back.format.fill = wallColorCode;
    Chart1.walls.back.format.shadow.visible = false;
    document.body.style.cursor = "pointer";

HTML：

<canvas id="canvas" class="contextCanvas"></canvas>

css:

.contextCanvas {
    position: relative;
    top:-3%;
}

有人可以建议我如何在适合不同设备的情况下使我的画布响应？