How to change the style size of a canvas dynamically by JavaScript?

Question

The size (width and height) of a canvas can be changed, but the style size of the canvas can not be changed dynamically.

canvas = document.getElementById('test_fabric');
ctx = this.canvas.getContext('2d');
canvas.style.width = 1000;  // does not work.
canvas.style.height = 260;  // does not work.
canvas.width = 100;  // works.
canvas.height = 100;  // works.

Both canvas.width and canvas.height work well, but both canvas.style.width and canvas.style.height do not work.

In my case, the style size of the canvas only can be changed by a css file or inline style of the canvas.

canvas#test_fabric {
  width:400px;
  height:400px;
  background:gold;
}

or

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

Note: The css file becomes ineffective when the inline style exists.

What's the way to change the style size of a canvas dynamically by JavaScript?

Sorry, I meant: http://stackoverflow.com/questions/13779429/canvas-inline-height-and-width-attributes-overridden-with-css-styles-is-this-is — Gavriel, Feb 08 '16 at 11:33
Have you tried specifying CSS length units, eg., "px"? `canvas.style.width = "1000px"` — nnnnnn, Feb 08 '16 at 11:38
I try to use "canvas.setAttribute('width', '500');" and "canvas.setAttribute('height', '500');", they do not work when defining canvas tag without style, and when defining canvas tag with style, Chrome reports a message: "[Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-8qEYHk4WwsvJKgLquQfLnw2DRoaMh4sWGNj24adrRLQ='), or a nonce ('nonce-...') is required to enable inline execution." — Calvin, Feb 08 '16 at 11:55
So...you've ignored my suggestion, and ignored the answer below that says the same thing, and instead you're now commenting about some *other* thing that didn't work? — nnnnnn, Feb 08 '16 at 12:00
canvas.style.width and canvas.style.height worked when specifying CSS length units "px". nnnnnn: thank you! — Calvin, Feb 08 '16 at 12:02

Bhojendra Rauniyar · Answer 1 · 2016-02-08T11:51:03.713

9

The style properties' width and height requires the measurement for its values while html attributes' width and height does not require. So, you need to set px, em or % etc. explicitly in your code:

canvas = document.getElementById('test_fabric');
ctx = canvas.getContext('2d');
canvas.style.width = '1000px'; // explicitly setting its unit 'px'
canvas.style.height = '260px';

style.width/height without unit is invalid rule for css.

edited Feb 08 '16 at 11:51

answered Feb 08 '16 at 11:39

Bhojendra Rauniyar

83,432
35
168
231

Thank your answer! Bhojendra Nepal. – Calvin Feb 08 '16 at 12:15
@Calvin You're welcome! – Bhojendra Rauniyar Feb 09 '16 at 03:32

score 3 · Answer 2 · edited Sep 01 '20 at 00:16

3

I have used jQuery that uses the css method for height and width setting:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#test_fabric").css({
      "border-color": "#C1E0FF",
      "border-width": "1px",
      "border-style": "solid",
      "height": "500px",
      "width": "500px"
    });
  });
</script>
<div class="col-md-12">
  <div><canvas id="test_fabric" width="200" height="200"></canvas></div>
</div>

edited Sep 01 '20 at 00:16

Lauren Yim

12,700
2
32
59

answered Feb 08 '16 at 11:40

abhay vyas

136
2

abhay vyas: I tried to use jquery as your way and found it worked. Thank you! – Calvin Feb 08 '16 at 12:12
If you use fabric.js, I found you can do this by: canvas.setDimensions({width:800, height:200},{backstoreOnly:true}); canvas.setDimensions({width:'800px', height:'200px'},{cssOnly:true}); – Calvin Feb 08 '16 at 12:29
1

setting the `width` and `height` as css` will only stretch the canvas image. that canvas should still be a 200x200 px area stretched to 500x500 px – Sabaz Feb 08 '16 at 14:06

How to change the style size of a canvas dynamically by JavaScript?

2 Answers2