Canvas Ellipse util

by Jared Williams

HTML

<canvas width="300" height="300"></canvas>

CSS

canvas { background: hsl(230,50%,20%); }

JavaScript

(function() {
    var canvas = document.querySelector('canvas'),
        con = canvas.getContext('2d'),
        x = 10,
        y = 10;
        
    setInterval(drawOvals, 1000 / 30);
    
    function drawOvals() {
        // vertical skinnier oval
        bezierCurve(x + 60, y + 75, 80, 130);
        
        // vertical fatter oval
        bezierCurve(x + 150, y + 75, 100, 120);
        
        // small oval
        bezierCurve(x + 125, y + 175, 20, 30);
        
        // horizontal oval
        bezierCurve(x + 105, y + 225, 200, 50);
    }
    
    
    // bezier curve util function    
    function bezierCurve(centerX, centerY, width, height) {
        con.beginPath();
        con.moveTo(centerX, centerY - height / 2);
        
        con.bezierCurveTo(
            centerX + width / 2, centerY - height / 2,
            centerX + width / 2, centerY + height / 2,
            centerX, centerY + height / 2
        );
        con.bezierCurveTo(
            centerX - width / 2, centerY + height / 2,
            centerX - width / 2, centerY - height / 2,
            centerX, centerY - height / 2
        );
        
        con.fillStyle = 'white';
        con.fill();
        con.closePath();
    }

    
    // quadratic curve util function
    function quadCurve(centerX, centerY, width, height) {
        con.beginPath();
        con.moveTo(centerX, centerY - height / 2);
        
        con.quadraticCurveTo(
            centerX + width / 2, centerY - height / 2,
            centerX, centerY + height / 2
        );
        
        con.fillStyle = 'black';
        con.fill();
        con.closePath();
    }
    
})();