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

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

2 Answers 2

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';