<!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(32.09000015258789, 35.82999801635742);

context.lineTo(32.91999816894531, 36.66999816894531);
context.stroke();

context.lineTo(33.7599983215332, 37.5);
context.stroke();

context.lineTo(35.41999816894531, 39.16999816894531);
context.stroke();

context.lineTo(37.91999816894531, 40.82999801635742);
context.stroke();

context.lineTo(39.59000015258789, 42.5);
context.stroke();

context.lineTo(42.91999816894531, 44.16999816894531);
context.stroke();

context.lineTo(46.2599983215332, 46.66999816894531);
context.stroke();

context.lineTo(51.2599983215332, 49.16999816894531);
context.stroke();

context.lineTo(56.2599983215332, 52.5);
context.stroke();

context.lineTo(60.41999816894531, 54.16999816894531);
context.stroke();

context.lineTo(66.26000213623047, 57.5);
context.stroke();

context.lineTo(72.91999816894531, 60);
context.stroke();

context.lineTo(79.58999633789062, 62.5);
context.stroke();

context.lineTo(84.58999633789062, 64.16999816894531);
context.stroke();

context.lineTo(87.08999633789062, 65.83000183105469);
context.stroke();

context.lineTo(90.41999816894531, 66.66999816894531);
context.stroke();

context.lineTo(92.91999816894531, 68.33000183105469);
context.stroke();

context.lineTo(93.75999450683594, 68.33000183105469);
context.stroke();

context.lineTo(93.75999450683594, 69.16999816894531);
context.stroke();

context.lineTo(93.75999450683594, 70);
context.stroke();

context.lineTo(93.75999450683594, 70.83000183105469);
context.stroke();

context.lineTo(92.91999816894531, 72.5);
context.stroke();

context.lineTo(92.08999633789062, 74.16999816894531);
context.stroke();

context.lineTo(91.25999450683594, 74.16999816894531);
context.stroke();

context.lineTo(89.58999633789062, 76.66999816894531);
context.stroke();

context.lineTo(89.58999633789062, 78.33000183105469);
context.stroke();

context.lineTo(88.75999450683594, 80.83000183105469);
context.stroke();

context.lineTo(87.91999816894531, 83.33000183105469);
context.stroke();

context.lineTo(87.08999633789062, 87.5);
context.stroke();

context.lineTo(86.25999450683594, 90.82999420166015);
context.stroke();

context.lineTo(85.41999816894531, 92.5);
context.stroke();

context.lineTo(84.58999633789062, 95.82999420166015);
context.stroke();

context.lineTo(84.58999633789062, 99.16999816894531);
context.stroke();

context.lineTo(84.58999633789062, 101.66999816894531);
context.stroke();

context.lineTo(84.58999633789062, 103.32999420166015);
context.stroke();

context.lineTo(84.58999633789062, 105.82999420166015);
context.stroke();

context.lineTo(84.58999633789062, 108.32999420166015);
context.stroke();

context.lineTo(85.41999816894531, 110);
context.stroke();

context.lineTo(86.25999450683594, 112.5);
context.stroke();

context.lineTo(87.08999633789062, 114.16999816894531);
context.stroke();

context.lineTo(88.75999450683594, 116.66999816894531);
context.stroke();

context.lineTo(90.41999816894531, 118.32999420166015);
context.stroke();

context.lineTo(92.08999633789062, 120);
context.stroke();

context.lineTo(93.75999450683594, 122.5);
context.stroke();

context.lineTo(95.41999816894531, 124.16999816894531);
context.stroke();

context.lineTo(97.08999633789062, 125.82999420166015);
context.stroke();

context.lineTo(98.75999450683594, 126.66999816894531);
context.stroke();

context.lineTo(99.58999633789062, 127.5);
context.stroke();

context.lineTo(100.41999816894531, 128.3300018310547);
context.stroke();

context.lineTo(101.25999450683594, 128.3300018310547);
context.stroke();

context.lineTo(102.08999633789062, 129.1699981689453);
context.stroke();

context.lineTo(102.91999816894531, 129.1699981689453);
context.stroke();

context.lineTo(103.75999450683594, 130);
context.stroke();

context.lineTo(104.58999633789062, 130);
context.stroke();

context.lineTo(105.41999816894531, 130);
context.stroke();

context.lineTo(105.41999816894531, 130.8300018310547);
context.stroke();

context.lineTo(106.25999450683594, 130.8300018310547);
context.stroke();

context.lineTo(107.08999633789062, 130.8300018310547);
context.stroke();

context.lineTo(107.08999633789062, 132.5);
context.stroke();

context.lineTo(107.91999816894531, 132.5);
context.stroke();

context.lineTo(108.75999450683594, 133.3300018310547);
context.stroke();

context.lineTo(109.58999633789062, 134.1699981689453);
context.stroke();

context.lineTo(109.58999633789062, 134.1699981689453);
context.stroke();

context.strokeStyle = '#000000';
context.strokeRect(157.08999633789062, 45.82999801635742, 221.66998291015625, 80.84000015258789);

context.lineWidth = 6;

context.lineWidth = 7;

context.lineWidth = 8;

context.lineWidth = 7;

context.lineWidth = 6;

context.lineWidth = 5;

context.lineWidth = 4;
</script>
</body>
</html>