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.

• javascript
• html
• canvas

3 Answers 3

Changing 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.)