<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your Canvas</title>

<style type="text/css"><!--
#container { position: relative; }
#imageTemp { position: absolute; top: 1px; left: 1px; }
--></style>

</head>
<body>
<canvas id="imageView" width="600" height="500"></canvas>

<script type="text/javascript">
var canvas, context, canvaso, contexto;
canvaso = document.getElementById('imageView');
context = canvaso.getContext('2d');
context.lineWidth = 5;

context.strokeStyle = '#FF0000';
context.beginPath();
context.moveTo(52, 67);
context.lineTo(56, 199);
context.stroke();
context.closePath();

context.strokeStyle = '#FF0000';
context.beginPath();
context.moveTo(57, 124);
context.lineTo(96, 123);
context.stroke();
context.closePath();

context.strokeStyle = '#FF0000';
context.beginPath();
context.moveTo(50, 72);
context.lineTo(119, 71);
context.stroke();
context.closePath();

context.strokeStyle = '#FF0000';
context.beginPath();
context.moveTo(58, 195);
context.lineTo(111, 193);
context.stroke();
context.closePath();

context.strokeStyle = '#FFFF00';
context.beginPath();
context.moveTo(147, 70);
context.lineTo(147, 70);
context.stroke();
context.closePath();

context.strokeStyle = '#FFFF00';
context.beginPath();
context.moveTo(154, 196);
context.lineTo(152, 69);
context.stroke();
context.closePath();

context.strokeStyle = '#FFFF00';
context.beginPath();
context.moveTo(152, 69);
context.lineTo(202, 195);
context.stroke();
context.closePath();

context.strokeStyle = '#FFFF00';
context.beginPath();
context.moveTo(202, 195);
context.lineTo(198, 65);
context.stroke();
context.closePath();

context.strokeStyle = '#00FF11';
context.beginPath();
context.moveTo(257, 76);
context.lineTo(248, 200);
context.stroke();
context.closePath();

context.strokeStyle = '#00FF11';
context.beginPath();
context.moveTo(255, 80);
context.lineTo(324, 81);
context.stroke();
context.closePath();

context.strokeStyle = '#00FF11';
context.beginPath();
context.moveTo(323, 131);
context.lineTo(320, 81);
context.stroke();
context.closePath();

context.strokeStyle = '#00FF11';
context.beginPath();
context.moveTo(321, 126);
context.lineTo(257, 124);
context.stroke();
context.closePath();

context.strokeStyle = '#00FF11';
context.beginPath();
context.moveTo(257, 124);
context.lineTo(306, 203);
context.stroke();
context.closePath();

context.strokeStyle = '#08D6FF';
context.beginPath();
context.moveTo(361, 81);
context.lineTo(358, 200);
context.stroke();
context.closePath();

context.strokeStyle = '#0F37FF';
context.beginPath();
context.moveTo(403, 77);
context.lineTo(443, 76);
context.stroke();
context.closePath();

context.strokeStyle = '#0F37FF';
context.beginPath();
context.moveTo(441, 78);
context.lineTo(456, 121);
context.stroke();
context.closePath();

context.strokeStyle = '#0F37FF';
context.beginPath();
context.moveTo(452, 180);
context.lineTo(455, 117);
context.stroke();
context.closePath();

context.strokeStyle = '#0F37FF';
context.beginPath();
context.moveTo(453, 174);
context.lineTo(426, 201);
context.stroke();
context.closePath();

context.strokeStyle = '#0F37FF';
context.beginPath();
context.moveTo(429, 199);
context.lineTo(396, 198);
context.stroke();
context.closePath();

context.strokeStyle = '#0F37FF';
context.beginPath();
context.moveTo(396, 198);
context.lineTo(380, 169);
context.stroke();
context.closePath();

context.strokeStyle = '#0F37FF';
context.beginPath();
context.moveTo(380, 169);
context.lineTo(378, 85);
context.stroke();
context.closePath();

context.strokeStyle = '#0F37FF';
context.beginPath();
context.moveTo(406, 78);
context.lineTo(381, 89);
context.stroke();
context.closePath();

context.strokeStyle = '#0F37FF';
context.beginPath();
context.moveTo(416, 161);
context.lineTo(447, 201);
context.stroke();
context.closePath();

context.strokeStyle = '#F703FF';
context.beginPath();
context.moveTo(475, 71);
context.lineTo(473, 178);
context.stroke();
context.closePath();

context.strokeStyle = '#F703FF';
context.beginPath();
context.moveTo(474, 176);
context.lineTo(504, 204);
context.stroke();
context.closePath();

context.strokeStyle = '#F703FF';
context.beginPath();
context.moveTo(504, 204);
context.lineTo(525, 181);
context.stroke();
context.closePath();

context.strokeStyle = '#F703FF';
context.beginPath();
context.moveTo(520, 72);
context.lineTo(525, 178);
context.stroke();
context.closePath();

context.strokeStyle = '#FF4A5C';
context.beginPath();
context.moveTo(551, 106);
context.lineTo(552, 70);
context.stroke();
context.closePath();

context.strokeStyle = '#FF4A5C';
context.beginPath();
context.moveTo(591, 74);
context.lineTo(552, 75);
context.stroke();
context.closePath();

context.strokeStyle = '#FF4A5C';
context.beginPath();
context.moveTo(551, 105);
context.lineTo(550, 196);
context.stroke();
context.closePath();

context.strokeStyle = '#FF4A5C';
context.beginPath();
context.moveTo(550, 196);
context.lineTo(583, 198);
context.stroke();
context.closePath();

context.strokeStyle = '#FF4A5C';
context.beginPath();
context.moveTo(551, 134);
context.lineTo(581, 133);
context.stroke();
context.closePath();
</script>
</body>
</html>