In JSFiddle, I create an arc using the standard syntax and it creates a long skinny elips. I found out that the css I am applying is dictating it's dimensions and not the canvas. Why is this?
JSFiddle: /
HTML:
<div id='drawSpace'></div>
CSS:
.circle {
height: 100px;
width: 100px;
border: 1px solid black;
}
JavaScript:
var c = document.createElement('canvas');
c.className = 'circle';
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(50,50,50,0,3*Math.PI);
ctx.stroke();
document.getElementById('drawSpace').appendChild(c);
Go ahead and change the width/height for the style to help understand the question. Thank you.
In JSFiddle, I create an arc using the standard syntax and it creates a long skinny elips. I found out that the css I am applying is dictating it's dimensions and not the canvas. Why is this?
JSFiddle: https://jsfiddle/jey2fodj/2/
HTML:
<div id='drawSpace'></div>
CSS:
.circle {
height: 100px;
width: 100px;
border: 1px solid black;
}
JavaScript:
var c = document.createElement('canvas');
c.className = 'circle';
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(50,50,50,0,3*Math.PI);
ctx.stroke();
document.getElementById('drawSpace').appendChild(c);
Go ahead and change the width/height for the style to help understand the question. Thank you.
Share Improve this question edited Dec 13, 2016 at 22:16 j08691 208k32 gold badges269 silver badges280 bronze badges asked Nov 13, 2016 at 22:41 Maximillion BartangoMaximillion Bartango 1,5991 gold badge20 silver badges34 bronze badges3 Answers
Reset to default 6Changing the canvas's dimensions stretches the canvas. To avoid doing that, try setting the width and height properties separately from the style property.
Source: http://webglfundamentals/webgl/lessons/webgl-resizing-the-canvas.html
As a side note for circles: you only need 2*Math.PI
, not 3*Math.PI
.
I would remend leaving CSS alone, and setting it all in Javascript, which I've found to be simplest. Also, I don't really know the best way to do it otherwise.
So there's CSS tags, and there's html attributes. CSS tags are the things inside of .css files, and html attributes are things like id
in <div id="thingy"></div>
. For canvases, you need to change BOTH. Now I tried adding width and height attributes to your canvas, but that didn't work for some reason (I'll update this answer if someone can tell me), so I went with the javascript route.
If you create a javascript object of an html element, any property of that object will be the attribute by the same name. So in html, you could say, <div id="thing" width="100"></div>
, or you can say, HTML: <div id="thing"></div>
JS: document.getElementById("thing").width = 100
and the oute would be the same.
Last thing: in JS, you can use htmlElement.style
to edit CSS using Javascript. So with Javascript, you want to set both the attribute and the css to be 100 (or 100px, in the case of the css/style).
After you've created the canvas,
c.style.width = "100px";
c.style.height = "100px";
c.width = 100;
c.height = 100;
Which, through javascript magic, can be shortened to
c.style.width = (c.width = 100) + "px";
c.style.height = (c.height = 100) + "px";
Updated fiddle here: https://jsfiddle/jey2fodj/3/
Your CSS styles the element, but doesn't change the canvas drawing context. The default dimensions of the draw area of a canvas are 300x150. If the canvas is resized via CSS, the draw area is scaled to fit. The canvas coordinates are still 300 at the right and 150 at the bottom.
To fix this, also set the dimension attributes on the element:
c.width = 100;
c.height = 100;
(Note that this is different from c.style.width
and c.style.height
which are the CSS dimensions.)