javascript - HTML Canvas Width can't be resized - Stack Overflow

admin管理员组

文章数量:1391951

I want to resize this Canvas width but I can't. No matter what - canvas width is 100% of the screen... Changing width and height changes only the ratio. Maybe someone know where is the problem?

    <canvas id="ini" width="500" height="300"></canvas>

/

.js-RangeSlider

I want to resize this Canvas width but I can't. No matter what - canvas width is 100% of the screen... Changing width and height changes only the ratio. Maybe someone know where is the problem?

    <canvas id="ini" width="500" height="300"></canvas>

https://jsfiddle/schme16/xfyvvup8/20/

https://github./schme16/Chart.js-RangeSlider

• javascript
• html
• canvas
• slider
• width

Share Improve this question Follow asked Mar 20, 2017 at 2:31 Darius KaziukevičiusDarius Kaziukevičius 4111 silver badge33 bronze badges 1

• just pass responsive: false option in your chartOptions dict. jsfiddle/xfyvvup8/89 – Kaiido Commented Mar 20, 2017 at 6:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I would guess that the charting library that you are using is doing some resizing. But since I don't have time to read the library's code, here is a workaround for you:

<div class="container">
    <canvas id="ini" width="500" height="300"></canvas>
</div>

.container {
    width: 500px;
}

That is, put the canvas element inside another element with a fixed width.

Demo: https://jsfiddle/xfyvvup8/88/

You can use the .height and .width property of the canvas DOM for this. It can be as same as the height and width attributes. You'll need to give numeric values in the JS code ti resize.

var canvas = document.getElementsByTagName('canvas')[0];
canvas.height = 500;
canvas.width  = 500;

These are the logical dimensions for the canvas. Now you can set the .style.height and .style.width CSS attributes. If you don't set up the style attributes then the intrinsic size of the canvas will be used as the display size. Then again, if you set up the CSS attributes and they differ from the canvas dimensions, your content will be rendered and scaled by the browser. Suppose you add these lines with the above.

canvas.style.width  = '750px';
canvas.style.height = '500px';

本文标签： javascriptHTML Canvas Width can39t be resizedStack Overflow