Last time, I introduced a function to draw a star on an HTML5 canvas. Now let's put that function to work drawing an American Flag. If you have an HTML5-compliant browser, you can see the flag below. If not, get updated! Browsers are free!

I'm proud to say that the flag is completely legit in its measurements, which I took from usflag.org.

I'll point out a few items of interest after the source.

<canvas id="flag" width="570" height="300" style="border:1px solid grey" >
    Your browser does not support HTML5.
</canvas>
<script>
    drawAmericanFlag("flag",0,0,300);

    // Draw an American Flag
    // canvasId - The id of the HTML canvas on which to draw the flag.
    // x        - The x coordinate of the flag's upper left corner, on the canvas.
    // y        - The y coordinate of the flag's upper left corner, on the canvas.
    // height   - The height of the flag. (Its width will be computed based
    //            on the standard dimensions of an American flag.)
    function drawAmericanFlag(canvasId, x, y, height) {
        var ctx = document.getElementById(canvasId).getContext("2d");

        // From the height, derive other measurements.
        var width = height * 1.9;
        var xStarSeparation = height * 0.063;
        var yStarSeparation = height * 0.054;

        // Make sure we start with a white base. That's the default for a 
        // canvas, but maybe someone else has already drawn on it.
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, width, height);

        // Color the red stripes.
        for (var ixStripe = 0; ixStripe < 13; ixStripe += 2) {
            ctx.fillStyle = "#C40043";
            ctx.fillRect(0, ixStripe * height / 13, width, height / 13);
        }

        // Draw the blue field.
        ctx.fillStyle = "#002654";
        ctx.fillRect(0, 0, 0.76 * height, height * 7 / 13);

        // Draw the stars.
        var outerRadius = 0.0616 * height / 2;
        var innerRadius = outerRadius * Math.sin(Math.PI / 10) / Math.sin(7 * Math.PI / 10);
        ctx.fillStyle = "white";
        for (var row = 1; row <= 9; ++row) {
            for (var col = 1; col <= 11; ++col) {
                if ((row + col) % 2 == 0) {
                    drawStar(ctx, xStarSeparation * col, yStarSeparation * row, 5, outerRadius, innerRadius);
                    ctx.fill();
                }
            }
        }
    }

    // Draw a star. This function just does does the lineTo's. It is up to the caller
    // to set the fillStyle and/or strokeStyle on the context, and call fill() or stroke()
    // after this function returns.
    // context     - The HTML5 canvas' context, obtained with getContext("2d").
    // xCenter     - The x coordinate of the center of the star, in the context.
    // yCenter     - The y coordinate of the center of the star, in the context.
    // nPoints     - The number of points the start should have.
    // outerRadius - The radius of a circle that would tightly fit the star's outer vertexes.
    // innerRadius - The radius of a circle that would tightly fit the star's inner vertexes.
    function drawStar(context, xCenter, yCenter, nPoints, outerRadius, innerRadius) {
        context.beginPath();
        for (var ixVertex = 0; ixVertex <= 2 * nPoints; ++ixVertex) {
            var angle = ixVertex * Math.PI / nPoints - Math.PI / 2;
            var radius = ixVertex % 2 == 0 ? outerRadius : innerRadius;
            context.lineTo(xCenter + radius * Math.cos(angle), yCenter + radius * Math.sin(angle));
        }
    }
</script>

The only solid shape that HTML5 knows about is the rectangle. If you're drawing rectangles, you don't need to worry about beginPath() as we did last time with the stars. You can just set a fillStyle (e.g., line 28) and call fillRect.

On line 38, I calculate the radius to the inner vertexes (innerRadius) such that there will be a straight line from each point to the point that is two points away. It involves a little trigonometry that I'd be happy to share if anyone is interested, but I won't bother if nobody cares. ;)

If you'd like to grab the source and play with it, or extract the drawStar method for your own use, here it is: flag.html (3.59 kb)