Cant get canvas to represent arcs as being tangent

Question

Basically i have an oval shape but this oval shape consists of 4 arcs. The oval has 2 side arcs which are equal and 2 end arcs which are equal. The side arcs are tangent to the end arcs and vise versa. If you take my code snippet you'll notice my problem.

            <!DOCTYPE html>
            <html>
            <body>

            <canvas id="myCanvas" width="500" height="500" style="border:2px solid black;">
            Your browser does not support the HTML5 canvas tag.</canvas>

            <script>

                var c = document.getElementById("myCanvas");
                var ctx = c.getContext("2d");
                var scale = 5
                var xPos = 250
                var yPos = 250
                var SideRad = .56104321 * 96.0000000000011
                var EndRad = .1190 * 96.0000000000011
                var dim1 = .3640432 * 96.0000000000011
                var dim2 = .2560 * 96.0000000000011
                var a1 = 54.88460631
                var a2 = 125.11539369

                ctx.beginPath();

                ctx.arc(xPos, yPos + (dim1 * scale), SideRad * scale, (((360 - a2) * Math.PI) / 180), (((360 - a1) * Math.PI) / 180), false);

                ctx.arc(xPos + (dim2 * scale), yPos, EndRad * scale, (((360 - a1) * Math.PI) / 180), ((a1 * Math.PI) / 180), false);

                ctx.arc(xPos, yPos - (dim1 * scale), SideRad * scale, ((a1 * Math.PI) / 180), ((a2 * Math.PI) / 180), false);

                ctx.arc(xPos - (dim2 * scale), yPos, EndRad * scale, (((a2) * Math.PI) / 180), (((360 - a2) * Math.PI) / 180), false);

                ctx.strokeStyle = 'black';
                ctx.lineJoin = "round"
                ctx.stroke();

            </script> 

            </body>
            </html>

possible duplicate of [How to draw an oval in html5 canvas?](http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas) — aurbano, Oct 21 '13 at 20:56

score 0 · Answer 1 · answered Oct 21 '13 at 21:28

Does your project design permit an alternate ellipse formed by 2 Bezier curves?

enter image description here

If so, try this code and a Fiddle: http://jsfiddle.net/m1erickson/UfXFK/

Note: this is an approximation of an ellipse, not a mathematically perfect ellipse.

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var point = drawEllipse(20, 50, 100);

function drawEllipse(x, cy, width) {
    // x=left, cy=vertical center of ellipse
    // note: just an approximation of an ellipse
    var height = width * 0.40;
    ctx.beginPath();
    ctx.moveTo(x, cy);
    ctx.bezierCurveTo(
    x + width / 2 * .05, cy - height,
    x + width - width / 2 * .05, cy - height,
    x + width, cy);
    ctx.bezierCurveTo(
    x + width - width / 2 * .05, cy + height,
    x + width / 2 * .05, cy + height,
    x, cy);
    ctx.closePath();
    ctx.stroke();
    return ({
        x: x + width,
        y: cy
    });
}

score 0 · Answer 2 · answered Oct 22 '13 at 07:28

If you simply want to draw an ellipse there is no need to use arc at all - here is an alternative way using simple trigonometry making a "perfect" ellipse/oval:

LIVE DEMO

Ellipse snapshot

var rx = 180,         /// radius x
    ry = 100,         /// radius y
    e = 2 * Math.PI,  /// end angle
    res = 0.05;       /// step resolution

ctx.beginPath();

/// calculate first point
ctx.moveTo(xPos + rx * Math.cos(e), yPos + ry * Math.sin(e));

while(e > res) {
    e -= res;
    ctx.lineTo(xPos + rx * Math.cos(e), yPos + ry * Math.sin(e));
}

ctx.closePath();   /// join first and last point
ctx.stroke();

This works fast and you can reduce the resolution by increasing res which will make it even faster (it can also be dynamic based on circumference).

Cant get canvas to represent arcs as being tangent

2 Answers2