<html>
<head>
<script>
function testOne(operation)
{
    var context = document.getElementById(operation).getContext('2d');

    context.fillStyle = "red";
    context.fillRect(0, 0, 1000, 1000);

    context.moveTo(0, 0);
    context.lineTo(0, 1000);
    context.lineTo(1000, 1000);
    context.lineTo(1000, 0);
    context.closePath();
    context[operation]();

    context.fillStyle = "green";
    context.fill();
}
function test()
{
    testOne("fill");
    testOne("stroke");
    testOne("clip");
}
</script>
</head>
<body onload="test()">
<p>All three of these small canvases should be green, not red.</p>
<canvas id="fill" width="20" height="20"></canvas>
<canvas id="stroke" width="20" height="20"></canvas>
<canvas id="clip" width="20" height="20"></canvas>
</body>
</html>