christophercliff/index.html

## index.html
<!doctype html>
<html>
    <head>

        <meta charset="utf-8" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script>

            $(function(){

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

                for (var i = 2, l = 360; i < l; i = i + 10)
                {
                    draw(ctx, i);

                    $('body')
                        //.append('<div>&lt;img src="' + canvas.toDataURL() + '" /&gt;</div>')
                        .append($('<img src="' + canvas.toDataURL() + '" />'))
                        ;

                    ctx.clearRect ( 0 , 0 , 21 , 36 );
                }

                $(canvas)
                    .remove()
                    ;

            });

            function draw(ctx, i) {

                // marker/Path
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(20.0, 10.5);
                ctx.bezierCurveTo(20.0, 15.1, 17.8, 16.0, 14.3, 22.1);
                ctx.bezierCurveTo(10.8, 28.1, 10.7, 34.9, 10.7, 34.9);
                ctx.lineTo(10.3, 34.9);
                ctx.bezierCurveTo(10.3, 34.9, 10.1, 28.1, 6.7, 22.1);
                ctx.bezierCurveTo(3.2, 16.0, 1.0, 15.1, 1.0, 10.5);
                ctx.bezierCurveTo(1.0, 5.2, 5.2, 1.0, 10.5, 1.0);
                ctx.bezierCurveTo(15.7, 1.0, 20.0, 5.2, 20.0, 10.5);
                ctx.closePath();
                ctx.fillStyle = 'hsl(' + i + ', 84%, 70%)';
                ctx.fill();
                ctx.strokeStyle = 'hsl(' + (i - 2) + ', 48%, 42%)';
                ctx.stroke();

                // marker/Path
                ctx.beginPath();
                ctx.moveTo(13.4, 11.0);
                ctx.bezierCurveTo(13.4, 12.6, 12.1, 13.9, 10.5, 13.9);
                ctx.bezierCurveTo(8.9, 13.9, 7.5, 12.6, 7.5, 11.0);
                ctx.bezierCurveTo(7.5, 9.3, 8.9, 8.0, 10.5, 8.0);
                ctx.bezierCurveTo(12.1, 8.0, 13.4, 9.3, 13.4, 11.0);
                ctx.closePath();
                ctx.fillStyle = 'rgb(0, 0, 0)';
                ctx.fill();
                ctx.restore();

            }

        </script>

    </head>

    <body>
        <canvas id="canvas" width="21" height="36"></canvas>
    </body>

</html>
	<!doctype html>
	<html>
	<head>

	<meta charset="utf-8" />

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script>

	$(function(){

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

	for (var i = 2, l = 360; i < l; i = i + 10)
	{
	draw(ctx, i);

	$('body')
	//.append('<div><img src="' + canvas.toDataURL() + '" /></div>')
	.append($('<img src="' + canvas.toDataURL() + '" />'))
	;

	ctx.clearRect ( 0 , 0 , 21 , 36 );
	}

	$(canvas)
	.remove()
	;

	});

	function draw(ctx, i) {

	// marker/Path
	ctx.save();
	ctx.beginPath();
	ctx.moveTo(20.0, 10.5);
	ctx.bezierCurveTo(20.0, 15.1, 17.8, 16.0, 14.3, 22.1);
	ctx.bezierCurveTo(10.8, 28.1, 10.7, 34.9, 10.7, 34.9);
	ctx.lineTo(10.3, 34.9);
	ctx.bezierCurveTo(10.3, 34.9, 10.1, 28.1, 6.7, 22.1);
	ctx.bezierCurveTo(3.2, 16.0, 1.0, 15.1, 1.0, 10.5);
	ctx.bezierCurveTo(1.0, 5.2, 5.2, 1.0, 10.5, 1.0);
	ctx.bezierCurveTo(15.7, 1.0, 20.0, 5.2, 20.0, 10.5);
	ctx.closePath();
	ctx.fillStyle = 'hsl(' + i + ', 84%, 70%)';
	ctx.fill();
	ctx.strokeStyle = 'hsl(' + (i - 2) + ', 48%, 42%)';
	ctx.stroke();

	// marker/Path
	ctx.beginPath();
	ctx.moveTo(13.4, 11.0);
	ctx.bezierCurveTo(13.4, 12.6, 12.1, 13.9, 10.5, 13.9);
	ctx.bezierCurveTo(8.9, 13.9, 7.5, 12.6, 7.5, 11.0);
	ctx.bezierCurveTo(7.5, 9.3, 8.9, 8.0, 10.5, 8.0);
	ctx.bezierCurveTo(12.1, 8.0, 13.4, 9.3, 13.4, 11.0);
	ctx.closePath();
	ctx.fillStyle = 'rgb(0, 0, 0)';
	ctx.fill();
	ctx.restore();

	}

	</script>

	</head>

	<body>
	<canvas id="canvas" width="21" height="36"></canvas>
	</body>

	</html>