Geek Answers Handbook

Canvas: arc (75.75,50,0,3,1415, true) draws an oval instead of a circle

Why does this code draw an oval instead of a circle at position (75, 75) with a radius of 50?

<canvas id=c1 style="width:400;height:400">
<script>
    ctx = c1.getContext('2d');
    ctx.fillStyle = '#7ef';
    ctx.fillRect(0, 0, 400, 400);
    ctx.fillStyle = '#000';
    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true)
    ctx.stroke();
</script>

enter image description here

+4
source share
2 answers

If you change this line:

<canvas id=c1 style="width:400;height:400">

in

<canvas id=c1 width=400 height=400></canvas>

he should work. Do not use CSS to set Canvas sizes, as this affects only the element, but not the bitmap. For a canvas, you need to use its selected properties (width / height) to also set the size of the bitmap, or the bitmap is simply stretched / scaled according to the size of the element.

, , 300x150 . ( ) 400x400, .

+13

, , JavaScript, , :

canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

-, PhoneGap/Cordova.

+2

More articles:


All Articles