<!DOCTYPE html>

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

<style type="text/css"></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 = '#000000';
context.beginPath();
context.moveTo(3, 3);
context.lineTo(595, 3);
context.stroke();
context.closePath();

context.strokeStyle = '#000000';
context.beginPath();
context.moveTo(592, 2);
context.lineTo(592, 2);
context.stroke();
context.closePath();

context.strokeStyle = '#000000';
context.beginPath();
context.moveTo(592, 3);
context.lineTo(592, 495);
context.stroke();
context.closePath();

context.strokeStyle = '#000000';
context.beginPath();
context.moveTo(592, 492);
context.lineTo(4, 492);
context.stroke();
context.closePath();

context.strokeStyle = '#000000';
context.beginPath();
context.moveTo(8, 491);
context.lineTo(6, 2);
context.stroke();
context.closePath();

context.strokeStyle = '#000000';
context.save();
context.translate(178.5, 68);
context.scale(1, 0.6511627906976745);
context.beginPath();
context.arc(0, 0, 51, 0, 6.283185307179586, false);
context.stroke();
context.closePath();
context.restore();

context.strokeStyle = '#000000';
context.save();
context.translate(237.5, 82);
context.scale(1, 0.5660377358490566);
context.beginPath();
context.arc(0, 0, 61, 0, 6.283185307179586, false);
context.stroke();
context.closePath();
context.restore();

context.strokeStyle = '#000000';
context.save();
context.translate(269, 41.5);
context.scale(1, 0.8157894736842105);
context.beginPath();
context.arc(0, 0, 49, 0, 6.283185307179586, false);
context.stroke();
context.closePath();
context.restore();

context.strokeStyle = '#000000';
context.save();
context.translate(373.5, 100.5);
context.scale(1, 0.5272727272727272);
context.beginPath();
context.arc(0, 0, 62, 0, 6.283185307179586, false);
context.stroke();
context.closePath();
context.restore();

context.strokeStyle = '#000000';
context.save();
context.translate(376, 63.5);
context.scale(1, 0.225);
context.beginPath();
context.arc(0, 0, 41, 0, 6.283185307179586, false);
context.stroke();
context.closePath();
context.restore();

context.strokeStyle = '#000000';
context.save();
context.translate(480.5, 60.5);
context.scale(0.7037037037037037, 1);
context.beginPath();
context.arc(0, 0, 33, 0, 6.283185307179586, false);
context.stroke();
context.closePath();
context.restore();

context.strokeStyle = '#000000';
context.save();
context.translate(561, 93);
context.scale(1, 0.65);
context.beginPath();
context.arc(0, 0, 48, 0, 6.283185307179586, false);
context.stroke();
context.closePath();
context.restore();

context.strokeStyle = '#000000';
context.save();
context.translate(352, 106);
context.scale(1, 0.41818181818181815);
context.beginPath();
context.arc(0, 0, 119, 0, 6.283185307179586, false);
context.stroke();
context.closePath();
context.restore();

context.strokeStyle = '#000000';
context.save();
context.translate(177.5, 192.5);
context.scale(1, 0.8352941176470589);
context.beginPath();
context.arc(0, 0, 111, 0, 6.283185307179586, false);
context.stroke();
context.closePath();
context.restore();

context.strokeStyle = '#000000';
context.save();
context.translate(279, 293.5);
context.scale(1, 0.5350877192982456);
context.beginPath();
context.arc(0, 0, 129, 0, 6.283185307179586, false);
context.stroke();
context.closePath();
context.restore();

context.strokeStyle = '#000000';
context.save();
context.translate(393.5, 264.5);
context.scale(1, 0.47126436781609193);
context.beginPath();
context.arc(0, 0, 96, 0, 6.283185307179586, false);
context.stroke();
context.closePath();
context.restore();

context.strokeStyle = '#000000';
context.save();
context.translate(333.5, 155.5);
context.scale(1, 0.5213675213675214);
context.beginPath();
context.arc(0, 0, 132, 0, 6.283185307179586, false);
context.stroke();
context.closePath();
context.restore();

context.strokeStyle = '#000000';
context.save();
context.translate(103, 391);
context.scale(0.7241379310344828, 1);
context.beginPath();
context.arc(0, 0, 72, 0, 6.283185307179586, false);
context.stroke();
context.closePath();
context.restore();

context.strokeStyle = '#000000';
context.save();
context.translate(280, 415.5);
context.scale(1, 0.5089285714285714);
context.beginPath();
context.arc(0, 0, 126, 0, 6.283185307179586, false);
context.stroke();
context.closePath();
context.restore();

context.strokeStyle = '#000000';
context.save();
context.translate(447, 339.5);
context.scale(0.9787234042553191, 1);
context.beginPath();
context.arc(0, 0, 66, 0, 6.283185307179586, false);
context.stroke();
context.closePath();
context.restore();

context.strokeStyle = '#000000';
context.strokeRect(84, 54, 382, 308);
</script>
</body>
</html>