CODEWITHSUNDEEP
htmlhtml5-canvas
ASR
ASR

Reputation: 471

Html 5 canvas arc issue - arc gets distorted

I am using the following code to draw a arc using html5 canvas.

This is my code

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="1000" height="550" style="padding-top:20px;border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(293.5, 183.4375, 186.70352183177323, 4.71238898038469, 6.8067840827778845);
    ctx.arc(293.5, 190.4375, 93.40238454336179, 6.8067840827778845, 4.71238898038469, true);
    ctx.closePath();
    ctx.strokeStyle = "white";
    ctx.lineWidth = 1;
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.stroke();
</script>

</body>
</html>

This is how the arc looks. IF observed closely, the top left end of the outer arc has a slight flat surface. Could anyone please tell me why this occurs? Why isnt the arc smooth?

enter image description here

Upvotes: 1

Views: 159

Answers (2)

Robin D.
Robin D.

Reputation: 48

The second arc has a rayon greater than the center y position. It's out of the canvas element.

You can see the change here : https://jsfiddle.net/o1rdkj8u/

ctx.arc(293.5, 183.4375, 183.43753/*186.70352183177323*/, 4.71238898038469, 6.8067840827778845);
ctx.arc(293.5, 183.4375/*190.4375*/, 93.40238454336179, 6.8067840827778845, 4.71238898038469, true);

Furthermore, your arcq don't have the same center. If it's not what you want, have a look at it.

Upvotes: 1

markE
markE

Reputation: 105045

Strokes are drawn half-inside and half-outside your arc.

The half-outside part of your arc is being cut off by the top of the canvas.

So if you want the stroke to fully fit inside the canvas then be sure you subtract half the context's linewidth.

radius = radius - context.lineWidth/2;

So for your arc:

ctx.arc(
    293.5, 183.4375, 
    186.70352183177323 - ctx.lineWidth/2,        // subtract half linewidth  
    4.71238898038469, 6.8067840827778845
);

Upvotes: 2

Related Questions