Untitled

<html>
<head>
<canvas id="example" width="800" height="600">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<script type="text/javascript">

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.strokeStyle = "rgb(80,80,80)";
context.lineWidth = 3;

function drawRectangle()
{
    // set up drawing
    context.beginPath();

    // set up rectangle
    context.moveTo(0, 0)
    context.lineTo(0, 100)
    context.lineTo(100, 100)
    context.lineTo(100, 0)
    context.lineTo(0, 0)

    // fill rectangle
    context.fill();

    // draw rectangle
    context.stroke();

    // close down drawing
    context.closePath();
}
function drawCross()
{
    // set up drawing
    context.beginPath();

    // set up line vertically in middle
    context.moveTo(50, 0)
    context.lineTo(50, 100)

    // set up line horizontally in middle
    context.moveTo(0,50)
    context.lineTo(100,50)

    // draw the lines
    context.stroke();

    // close down drawing
    context.closePath()
}
function drawS()
{
    // set up drawing
    context.beginPath();
    context.lineWidth = 1.5;

    // set start of S
    context.moveTo(75, 35)

    context.lineTo(74, 34)
    context.lineTo(73, 33)
    context.lineTo(72, 32)
    context.lineTo(71, 31)


    context.lineTo(50, 17.5)


    context.lineTo(25, 35)


    context.lineTo(75, 70)


    context.lineTo(50, 87.5)


    context.lineTo(25, 70)


    // draw the S
    context.stroke();

    // close down the drawing
    context.closePath();
}
</script>
</head>

<body>


<script type="text/javascript">
<!--
drawRectangle()
//drawCross()
drawS()
// -->
</script>


</body>
</html>