CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
BanksySan
BanksySan

Reputation: 28530

ArcTo() not drawing arc

I've got the following HTML file:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Canvas Hello World</title>
    <link href="default.css" rel="stylesheet" />
    <script src="jquery-2.0.0.min.js"></script>
</head>
<body>
    <h1>ArcTo</h1>
    <h2>Two arcs</h2>
    <canvas id="arcToNormalCanvas" width="500" height="500">HTML5 not supported
    </canvas>
    <hr />

    <h1>Simple drawing:</h1>
    <canvas id="rectangleCanvas" width="500" height="500">HTML5 not supported
    </canvas>
    <hr />

    <script>
        $(document).ready(function () {
            doRectangleCanvas();
            drawTwoArcs();
        });

        function doRectangleCanvas() {
            var canvas = $('#rectangleCanvas')[0],
                ctx = canvas.getContext('2d');

            ctx.fillRect(50, 100, 150, 200);
            ctx.stroke();
        }

        function drawTwoArcs() {
            var canvas = $('#arcToNormalCanvas')[0],
                ctx = canvas.getContext('2d');
            ctx.strokeStyle = 'blue';
            ctx.lineWidth = 5;
            ctx.beginPath();
            ctx.moveTo(100, 100);
            ctx.lineTo(200, 200);
            ctx.moveTo(300, 200);
            ctx.lineTo(400, 100);
            ctx.stroke();

            ctx.beginPath();
            ctx.strokeStyle = 'green';
            ctx.moveTo(200, 200);
            ctx.arcTo(200, 200, 300, 200, 100);
            ctx.stroke();
        }
    </script>
</body>
</html>

However, the output is only the lines, with no arc!

Canvas of html file above

Any ideas?

Upvotes: 1

Views: 934

Answers (2)

manolinjr81
manolinjr81

Reputation: 51

If you want to connect the two lines, which is what I think you want, I have to change this lines...

//...
ctx.moveTo(200, 200);
ctx.arcTo(250, 250, 300, 200, 50);
// A radius of 100 is not what you want I believe.
// I used 50 for this example.
// You might want Math.cos(Math.Pi / 4) * 100, which is around 70.7

// You might also want to add here a line to actually connect with (300, 200). As if you use a too short or too long radius your arc will not be connected.
ctx.lineTo(300, 200);
ctx.stroke();

... As this function will define an arc between the two tangents not from point to point.

BTW, arcTo function is well supported in all major browsers that support the canvas element.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324730

arcTo is only supported by Firefox and Safari. For full browser support, you should use arc:

ctx.beginPath();
ctx.arc(250,200,50,Math.PI,Math.PI*2,true);
ctx.strokeStyle = "green";
ctx.stroke();

Also, I have to ask, why on earth are you using $('#rectangleCanvas')[0] when you should be using document.getElementById('rectangleCanvas')?

Upvotes: 2

Related Questions