CODEWITHSUNDEEP
javascripthtmlcanvas
wizardo
wizardo

Reputation: 35

How to remove the radius lines in html canvas when drawing a circle with arc in javascript?

This is my HTML code to draw a smiley face. After I tried it out, I saw that there are some extra lines. there are lines in the eyes in the place of the radius. and for the mouth too. How can I remove those three radius lines?

CLICK HERE FOR OUTPUT IMAGE

<html>
    <head>
  
    </head>
    <body onclick="line();">
        <canvas id="canvas" width="1000" height="500"></canvas>
        <script>
            function line()
            {
                var canvas = document.getElementById('canvas');
                if(canvas.getContext)
                    {
                        var lines = canvas.getContext('2d');
                        lines.beginPath();
                        lines.arc(275,275,150,0,Math.PI*2,true);
                        lines.moveTo(280, 275);
                        lines.arc(275, 275, 100, 0, Math.PI, false);
                        lines.moveTo(210,220);
                        lines.arc(210, 220, 20, 0, Math.PI*2, true);
                        lines.moveTo(350, 220);
                        lines.arc(350, 220, 20, 0, Math.PI*2, true);
                        lines.stroke();                
                    }
            }
        </script>
    </body>
</html>

Upvotes: 2

Views: 2413

Answers (3)

HumanJHawkins
HumanJHawkins

Reputation: 268

The existing answers require the user to know the starting coordinate for the arc. In many cases, this is an overly burdensome requirement.

A much easier solution is simply to complete the path that you were working on, and begin a new one. You can do this with:

theContext.stroke();
theContext.closePath();
theContext.beginPath();

For example:

lines.beginPath();
lines.arc(275,275,150,0,Math.PI*2,true);
lines.stroke();
lines.closePath();
lines.beginPath();
lines.arc(275, 275, 100, 0, Math.PI, false);
lines.stroke();
lines.closePath();
lines.beginPath();
lines.arc(210, 220, 20, 0, Math.PI*2, true);
lines.stroke();
lines.closePath();
lines.beginPath();
lines.arc(350, 220, 20, 0, Math.PI*2, true);
lines.stroke();

Good luck!

Upvotes: 0

Kevin Goudswaard
Kevin Goudswaard

Reputation: 11

I saw your question, and found your answer. I started playing around with you coordinates, and discovered that the coordinates you were using in your ".moveTo" statements were wrong. The code you had was telling the program to begin drawing the circle in the center- first causing a line horizontally from the center to the arc, and then around to complete the circle itself. I have amended your .moveTo coordinates to begin on the arc of the circle:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body onclick="line();">
    <canvas id="canvas" width="1000" height="500"></canvas>
    <script>
        function line()
        {
            var canvas = document.getElementById('canvas');
            if(canvas.getContext)
                {
                    var lines = canvas.getContext('2d');
                    lines.beginPath();
                    lines.arc(275,275,150,0, 2*Math.PI,true);
                    lines.moveTo(280, 275);
                    lines.arc(275, 275, 100, 0, Math.PI, false);
                    lines.moveTo(230,220);
                    lines.arc(210,220,20,0, Math.PI*2, true);
                    lines.moveTo(370, 220);
                    lines.arc(350, 220, 20, 0, Math.PI*2, true);
                    lines.stroke();                
                }
        }
    </script>
</body>
</html>

Upvotes: 0

tgtb
tgtb

Reputation: 191

Your moveTo() calls are going to the center point of each of the arcs. The arcs are actually drawn starting from the perimeter, so your path goes from the center to the perimeter before starting the arc.

To fix this just change the moveTo() calls to the right most point on the arc (this is where the drawing starts). Here is my fix:

function line()
{
    var canvas = document.getElementById('canvas');
    if(canvas.getContext)
    {
        var lines = canvas.getContext('2d');
        lines.beginPath();
        lines.arc(275,275,150,0,Math.PI*2,true);
        lines.moveTo(375, 275);
        lines.arc(275, 275, 100, 0, Math.PI, false);
        lines.moveTo(230,220);
        lines.arc(210, 220, 20, 0, Math.PI*2, true);
        lines.moveTo(370, 220);
        lines.arc(350, 220, 20, 0, Math.PI*2, true);
        lines.stroke();
    }
}

Upvotes: 4

Related Questions