0

I am drawing on a canvas object using JavaScript and somehow Internet Explorer (don't ask, I have to), Version 11 scales the drawings along the x axis.

Here is the JavaScript code:

var c = document.getElementById('canvas1');
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.fillStyle = '#000000';
ctx.lineWidth = 5;
ctx.stroke();

You would expect a circle to appear. But instead I get an Ellipse:

(Don't mind the horizontal line on the left, that just the surrounding div. The canvas is the small square.)

EDIT: The size of the canvas is 100 x 100.

elementzero23
  • 1,389
  • 2
  • 16
  • 38
  • are you somehow setting some width or height with CSS on this poor canvas ? If so, stop right now and use its own `width` and `height` attributes. – Kaiido Oct 05 '16 at 14:24
  • Only `width` and `height` attributes? Or are there any other attributes you have to set inside the html tag? – elementzero23 Oct 05 '16 at 14:26
  • Just don't set it through CSS, at least until you understand what it does. Then you'll remember to always set it by respecting the aspect-ratio of your context. And no, no other attributes needed. – Kaiido Oct 05 '16 at 14:28
  • Can you explain what it does? I think I only set height and width of `div` Elements through CSS before... – elementzero23 Oct 05 '16 at 14:32
  • 1
    [One of the many question about it](http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties), but without seeing your CSS, it's only a guess and can be wrong. – Kaiido Oct 05 '16 at 14:38

1 Answers1

0

Following the comments the answer is to set height and width of the canvas object as attributes of the canvas-tag. Like this:

<canvas height="200" width="400"></canvas>

See this post for further explanation.

Community
  • 1
  • 1
elementzero23
  • 1,389
  • 2
  • 16
  • 38