my logo icon drawn with Javascript on an HTML5 canvas

netj-icon.js

// netj's icon with HTML5 canvas

function drawIconOnCanvas(w, opacity, canvas, a) {
    if (canvas.getContext) {
        var c = canvas.getContext("2d");
        // name some constants
        canvas.width = canvas.height = w;
        c.clearRect(0, 0, w, w);
        var o = w/12;
        var l = (w-3*o)/2;
        // some drawing styles
        c.lineWidth = o/4;
        c.lineCap = "round";
        c.lineJoin = "round";

        var wings = [
        { color: "rgba(255,  68,  34, "+opacity+")" }, // red
        { color: "rgba(255, 204,  34, "+opacity+")" }, // yellow
        { color: "rgba( 34,  68, 255, "+opacity+")" }, // blue
        { color: "rgba( 68, 170,  68, "+opacity+")" }, // green
        ];
        c.translate(+w/2, +w/2);
        c.rotate(Math.PI);
        for (var i in wings) {
            var wing = wings[i];
            c.fillStyle = c.strokeStyle = wing.color;
            // draw a wing
            c.save();
            c.translate(+w/4, +w/4); c.rotate(Math.PI); c.translate(-w/4, -w/4);
            c.beginPath();
            c.moveTo(o, o);
            c.arc(o,     o+l,   l, -Math.PI/2,        0, false);
            c.arc(o+l/2, o+l, l/2,          0, -Math.PI,  true);
            c.lineTo(o, o);
            c.closePath();
            c.fill();
            c.stroke();
            c.restore();
            c.rotate(Math.PI/2);
        }
        if (a)
            a.href = canvas.toDataURL();
    }
}

document.write(' \
<div> \
    Size: \
    <input type="number" id="size" size="4" value="256" onchange="update();">px \
    <br> \
    Opacity: \
    <input type="range" id="opacity" value="100" min="0" max="100" step="1" onchange="update();"> \
    <br> \
    <blockquote> \
        <a id="link"> \
            <canvas id="icon" style="border: 1px solid;"> \
            HTML5 canvas support is missing :( \
            </canvas> \
        </a> \
    </blockquote> \
</div> \
');

function update() {
    drawIconOnCanvas(
    parseInt(document.getElementById("size").value),
    parseInt(document.getElementById("opacity").value)/100,
    document.getElementById("icon"),
    document.getElementById("link")
    );
}

update();