画布大小不符合我的风格

Question

我的HTML代码中有

<div><canvas id="canvas" style="width:300px;height:300px"></canvas></div>

然后我使用chart.js绘制图形，画布大大超出了我给定的尺寸。

要绘制的JavaScript如下：

function DrawGraph(respData) {
        //start config
        var config = {
            type: 'line',
            data: {
                labels: respData.dataLabels,
                datasets: [{
                    label: 'Orders',
                    backgroundColor: 'rgb(255, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: respData.dataValues,
                    fill: false,
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: ''
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: ''
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Amount'
                        }
                    }]
                }
            }
        };
        //end config
        var ctx = document.getElementById('canvas').getContext('2d');
        var myGraph = new Chart(ctx, config);
    }

无论我如何设置画布的宽度和高度。似乎图表决定了它必须多大。