&lt;!DOCTYPE html&gt;<br/><br/>&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;<br/>&lt;head&gt;<br/>    &lt;title&gt;Your Canvas&lt;/title&gt;<br/><br/>    &lt;style type=&quot;text/css&quot;&gt;&lt;!--<br/>      #container { position: relative; }<br/>      #imageTemp { position: absolute; top: 1px; left: 1px; }<br/>    --&gt;&lt;/style&gt;<br/>        <br/>&lt;/head&gt;<br/>&lt;body&gt;  <br/>        &lt;canvas id=&quot;imageView&quot; width=&quot;600&quot; height=&quot;500&quot;&gt;&lt;/canvas&gt;<br/>            <br/>        &lt;script type=&quot;text/javascript&quot;&gt;<br/>var canvas, context, canvaso, contexto;<br/>canvaso = document.getElementById('imageView');<br/>context = canvaso.getContext('2d');<br/>context.lineWidth = 5;<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(238, 91);<br/>context.lineTo(405,   90);<br/>context.stroke();<br/>context.closePath();<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(403, 92);<br/>context.lineTo(405,   221);<br/>context.stroke();<br/>context.closePath();<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(405, 221);<br/>context.lineTo(526,   220);<br/>context.stroke();<br/>context.closePath();<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(525, 223);<br/>context.lineTo(524,   320);<br/>context.stroke();<br/>context.closePath();<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(524, 320);<br/>context.lineTo(492,   324);<br/>context.stroke();<br/>context.closePath();<br/><br/>context.strokeStyle = '#FFFFFF';<br/>context.beginPath();<br/>context.moveTo(495, 322);<br/><br/>context.lineTo(495, 323);<br/>context.stroke();<br/><br/>context.lineTo(495, 324);<br/>context.stroke();<br/><br/>context.lineTo(496, 327);<br/>context.stroke();<br/><br/>context.lineTo(496, 329);<br/>context.stroke();<br/><br/>context.lineTo(496, 331);<br/>context.stroke();<br/><br/>context.lineTo(496, 333);<br/>context.stroke();<br/><br/>context.lineTo(496, 336);<br/>context.stroke();<br/><br/>context.lineTo(496, 338);<br/>context.stroke();<br/><br/>context.lineTo(496, 340);<br/>context.stroke();<br/><br/>context.lineTo(497, 341);<br/>context.stroke();<br/><br/>context.lineTo(497, 342);<br/>context.stroke();<br/><br/>context.lineTo(497, 341);<br/>context.stroke();<br/><br/>context.lineTo(497, 340);<br/>context.stroke();<br/><br/>context.lineTo(497, 337);<br/>context.stroke();<br/><br/>context.lineTo(497, 333);<br/>context.stroke();<br/><br/>context.lineTo(497, 324);<br/>context.stroke();<br/><br/>context.lineTo(498, 315);<br/>context.stroke();<br/><br/>context.lineTo(498, 308);<br/>context.stroke();<br/><br/>context.lineTo(499, 306);<br/>context.stroke();<br/><br/>context.lineTo(499, 305);<br/>context.stroke();<br/><br/>context.lineTo(499, 304);<br/>context.stroke();<br/><br/>context.lineTo(500, 304);<br/>context.stroke();<br/><br/>context.lineTo(501, 304);<br/>context.stroke();<br/><br/>context.lineTo(502, 304);<br/>context.stroke();<br/><br/>context.lineTo(503, 304);<br/>context.stroke();<br/><br/>context.lineTo(504, 305);<br/>context.stroke();<br/><br/>context.lineTo(505, 307);<br/>context.stroke();<br/><br/>context.lineTo(505, 309);<br/>context.stroke();<br/><br/>context.lineTo(505, 311);<br/>context.stroke();<br/><br/>context.lineTo(506, 312);<br/>context.stroke();<br/><br/>context.lineTo(506, 314);<br/>context.stroke();<br/><br/>context.lineTo(506, 316);<br/>context.stroke();<br/><br/>context.lineTo(506, 317);<br/>context.stroke();<br/><br/>context.lineTo(506, 318);<br/>context.stroke();<br/><br/>context.lineTo(506, 321);<br/>context.stroke();<br/><br/>context.lineTo(505, 325);<br/>context.stroke();<br/><br/>context.lineTo(504, 326);<br/>context.stroke();<br/><br/>context.lineTo(504, 327);<br/>context.stroke();<br/><br/>context.lineTo(504, 328);<br/>context.stroke();<br/><br/>context.lineTo(504, 329);<br/>context.stroke();<br/><br/>context.lineTo(503, 329);<br/>context.stroke();<br/><br/>context.lineTo(502, 329);<br/>context.stroke();<br/><br/>context.lineTo(501, 329);<br/>context.stroke();<br/><br/>context.lineTo(500, 329);<br/>context.stroke();<br/><br/>context.lineTo(499, 329);<br/>context.stroke();<br/><br/>context.lineTo(498, 328);<br/>context.stroke();<br/><br/>context.lineTo(497, 326);<br/>context.stroke();<br/><br/>context.lineTo(497, 323);<br/>context.stroke();<br/><br/>context.lineTo(496, 319);<br/>context.stroke();<br/><br/>context.lineTo(495, 316);<br/>context.stroke();<br/><br/>context.lineTo(495, 314);<br/>context.stroke();<br/><br/>context.lineTo(495, 313);<br/>context.stroke();<br/><br/>context.lineTo(495, 311);<br/>context.stroke();<br/><br/>context.lineTo(495, 310);<br/>context.stroke();<br/><br/>context.lineTo(495, 309);<br/>context.stroke();<br/><br/>context.lineTo(496, 309);<br/>context.stroke();<br/><br/>context.lineTo(497, 309);<br/>context.stroke();<br/><br/>context.lineTo(498, 309);<br/>context.stroke();<br/><br/>context.lineTo(499, 309);<br/>context.stroke();<br/><br/>context.lineTo(500, 310);<br/>context.stroke();<br/><br/>context.lineTo(501, 311);<br/>context.stroke();<br/><br/>context.lineTo(501, 314);<br/>context.stroke();<br/><br/>context.lineTo(502, 315);<br/>context.stroke();<br/><br/>context.lineTo(503, 317);<br/>context.stroke();<br/><br/>context.lineTo(503, 320);<br/>context.stroke();<br/><br/>context.lineTo(503, 322);<br/>context.stroke();<br/><br/>context.lineTo(503, 324);<br/>context.stroke();<br/><br/>context.lineTo(503, 326);<br/>context.stroke();<br/><br/>context.lineTo(503, 327);<br/>context.stroke();<br/><br/>context.lineTo(502, 329);<br/>context.stroke();<br/><br/>context.lineTo(501, 330);<br/>context.stroke();<br/><br/>context.lineTo(500, 331);<br/>context.stroke();<br/><br/>context.lineTo(499, 331);<br/>context.stroke();<br/><br/>context.lineTo(498, 331);<br/>context.stroke();<br/><br/>context.lineTo(497, 331);<br/>context.stroke();<br/><br/>context.lineTo(496, 331);<br/>context.stroke();<br/><br/>context.lineTo(495, 331);<br/>context.stroke();<br/><br/>context.lineTo(494, 331);<br/>context.stroke();<br/><br/>context.lineTo(492, 329);<br/>context.stroke();<br/><br/>context.lineTo(491, 326);<br/>context.stroke();<br/><br/>context.lineTo(491, 323);<br/>context.stroke();<br/><br/>context.lineTo(490, 319);<br/>context.stroke();<br/><br/>context.lineTo(490, 317);<br/>context.stroke();<br/><br/>context.lineTo(490, 315);<br/>context.stroke();<br/><br/>context.lineTo(490, 313);<br/>context.stroke();<br/><br/>context.lineTo(490, 311);<br/>context.stroke();<br/><br/>context.lineTo(492, 309);<br/>context.stroke();<br/><br/>context.lineTo(492, 308);<br/>context.stroke();<br/><br/>context.lineTo(492, 307);<br/>context.stroke();<br/><br/>context.lineTo(492, 306);<br/>context.stroke();<br/><br/>context.lineTo(493, 306);<br/>context.stroke();<br/><br/>context.lineTo(494, 306);<br/>context.stroke();<br/><br/>context.lineTo(495, 306);<br/>context.stroke();<br/><br/>context.lineTo(496, 307);<br/>context.stroke();<br/><br/>context.lineTo(497, 308);<br/>context.stroke();<br/><br/>context.lineTo(498, 311);<br/>context.stroke();<br/><br/>context.lineTo(499, 314);<br/>context.stroke();<br/><br/>context.lineTo(499, 316);<br/>context.stroke();<br/><br/>context.lineTo(499, 320);<br/>context.stroke();<br/><br/>context.lineTo(499, 322);<br/>context.stroke();<br/><br/>context.lineTo(498, 325);<br/>context.stroke();<br/><br/>context.lineTo(497, 327);<br/>context.stroke();<br/><br/>context.lineTo(497, 328);<br/>context.stroke();<br/><br/>context.lineTo(496, 329);<br/>context.stroke();<br/><br/>context.lineTo(495, 329);<br/>context.stroke();<br/><br/>context.lineTo(495, 330);<br/>context.stroke();<br/><br/>context.lineTo(494, 330);<br/>context.stroke();<br/><br/>context.lineTo(493, 330);<br/>context.stroke();<br/><br/>context.lineTo(492, 330);<br/>context.stroke();<br/><br/>context.lineTo(489, 329);<br/>context.stroke();<br/><br/>context.lineTo(489, 328);<br/>context.stroke();<br/><br/>context.lineTo(488, 327);<br/>context.stroke();<br/><br/>context.lineTo(488, 325);<br/>context.stroke();<br/><br/>context.lineTo(488, 323);<br/>context.stroke();<br/><br/>context.lineTo(488, 320);<br/>context.stroke();<br/><br/>context.lineTo(488, 317);<br/>context.stroke();<br/><br/>context.lineTo(490, 315);<br/>context.stroke();<br/><br/>context.lineTo(492, 313);<br/>context.stroke();<br/><br/>context.lineTo(493, 311);<br/>context.stroke();<br/><br/>context.lineTo(494, 311);<br/>context.stroke();<br/><br/>context.lineTo(495, 311);<br/>context.stroke();<br/><br/>context.lineTo(496, 311);<br/>context.stroke();<br/><br/>context.lineTo(499, 311);<br/>context.stroke();<br/><br/>context.lineTo(501, 311);<br/>context.stroke();<br/><br/>context.lineTo(502, 312);<br/>context.stroke();<br/><br/>context.lineTo(503, 312);<br/>context.stroke();<br/><br/>context.lineTo(505, 314);<br/>context.stroke();<br/><br/>context.lineTo(505, 315);<br/>context.stroke();<br/><br/>context.lineTo(506, 316);<br/>context.stroke();<br/><br/>context.lineTo(507, 318);<br/>context.stroke();<br/><br/>context.lineTo(507, 319);<br/>context.stroke();<br/><br/>context.lineTo(507, 320);<br/>context.stroke();<br/><br/>context.lineTo(507, 322);<br/>context.stroke();<br/><br/>context.lineTo(507, 323);<br/>context.stroke();<br/><br/>context.lineTo(507, 325);<br/>context.stroke();<br/><br/>context.lineTo(506, 326);<br/>context.stroke();<br/><br/>context.lineTo(506, 327);<br/>context.stroke();<br/><br/>context.lineTo(506, 328);<br/>context.stroke();<br/><br/>context.lineTo(506, 329);<br/>context.stroke();<br/><br/>context.lineTo(506, 328);<br/>context.stroke();<br/><br/>context.lineTo(506, 326);<br/>context.stroke();<br/><br/>context.lineTo(507, 323);<br/>context.stroke();<br/><br/>context.lineTo(508, 320);<br/>context.stroke();<br/><br/>context.lineTo(509, 318);<br/>context.stroke();<br/><br/>context.lineTo(509, 317);<br/>context.stroke();<br/><br/>context.lineTo(509, 316);<br/>context.stroke();<br/><br/>context.lineTo(510, 316);<br/>context.stroke();<br/><br/>context.lineTo(511, 316);<br/>context.stroke();<br/><br/>context.lineTo(511, 318);<br/>context.stroke();<br/><br/>context.lineTo(512, 319);<br/>context.stroke();<br/><br/>context.lineTo(513, 320);<br/>context.stroke();<br/><br/>context.lineTo(514, 322);<br/>context.stroke();<br/><br/>context.lineTo(514, 323);<br/>context.stroke();<br/><br/>context.lineTo(514, 326);<br/>context.stroke();<br/><br/>context.lineTo(514, 328);<br/>context.stroke();<br/><br/>context.lineTo(514, 331);<br/>context.stroke();<br/><br/>context.lineTo(514, 330);<br/>context.stroke();<br/><br/>context.lineTo(513, 328);<br/>context.stroke();<br/><br/>context.lineTo(513, 323);<br/>context.stroke();<br/><br/>context.lineTo(513, 321);<br/>context.stroke();<br/><br/>context.lineTo(513, 320);<br/>context.stroke();<br/><br/>context.lineTo(514, 320);<br/>context.stroke();<br/><br/>context.lineTo(515, 320);<br/>context.stroke();<br/><br/>context.lineTo(515, 321);<br/>context.stroke();<br/><br/>context.lineTo(516, 323);<br/>context.stroke();<br/><br/>context.lineTo(516, 325);<br/>context.stroke();<br/><br/>context.lineTo(517, 326);<br/>context.stroke();<br/><br/>context.lineTo(517, 327);<br/>context.stroke();<br/><br/>context.lineTo(517, 329);<br/>context.stroke();<br/><br/>context.lineTo(517, 331);<br/>context.stroke();<br/><br/>context.lineTo(517, 332);<br/>context.stroke();<br/><br/>context.lineTo(517, 333);<br/>context.stroke();<br/><br/>context.lineTo(516, 333);<br/>context.stroke();<br/><br/>context.lineTo(515, 333);<br/>context.stroke();<br/><br/>context.lineTo(514, 333);<br/>context.stroke();<br/><br/>context.lineTo(513, 333);<br/>context.stroke();<br/><br/>context.lineTo(512, 332);<br/>context.stroke();<br/><br/>context.lineTo(512, 331);<br/>context.stroke();<br/><br/>context.lineTo(512, 330);<br/>context.stroke();<br/><br/>context.lineTo(512, 328);<br/>context.stroke();<br/><br/>context.lineTo(512, 326);<br/>context.stroke();<br/><br/>context.lineTo(512, 322);<br/>context.stroke();<br/><br/>context.lineTo(512, 319);<br/>context.stroke();<br/><br/>context.lineTo(512, 318);<br/>context.stroke();<br/><br/>context.lineTo(512, 317);<br/>context.stroke();<br/><br/>context.lineTo(512, 316);<br/>context.stroke();<br/><br/>context.lineTo(513, 316);<br/>context.stroke();<br/><br/>context.lineTo(514, 316);<br/>context.stroke();<br/><br/>context.lineTo(515, 316);<br/>context.stroke();<br/><br/>context.lineTo(516, 317);<br/>context.stroke();<br/><br/>context.lineTo(516, 319);<br/>context.stroke();<br/><br/>context.lineTo(517, 320);<br/>context.stroke();<br/><br/>context.lineTo(517, 321);<br/>context.stroke();<br/><br/>context.lineTo(518, 322);<br/>context.stroke();<br/><br/>context.lineTo(518, 321);<br/>context.stroke();<br/><br/>context.lineTo(518, 320);<br/>context.stroke();<br/><br/>context.lineTo(518, 319);<br/>context.stroke();<br/><br/>context.lineTo(518, 318);<br/>context.stroke();<br/><br/>context.lineTo(518, 317);<br/>context.stroke();<br/><br/>context.lineTo(519, 317);<br/>context.stroke();<br/><br/>context.lineTo(520, 317);<br/>context.stroke();<br/><br/>context.lineTo(521, 317);<br/>context.stroke();<br/><br/>context.lineTo(522, 317);<br/>context.stroke();<br/><br/>context.lineTo(522, 318);<br/>context.stroke();<br/><br/>context.lineTo(523, 319);<br/>context.stroke();<br/><br/>context.lineTo(524, 320);<br/>context.stroke();<br/><br/>context.lineTo(524, 319);<br/>context.stroke();<br/><br/>context.lineTo(523, 319);<br/>context.stroke();<br/><br/>context.lineTo(523, 317);<br/>context.stroke();<br/><br/>context.lineTo(524, 317);<br/>context.stroke();<br/><br/>context.lineTo(525, 317);<br/>context.stroke();<br/><br/>context.lineTo(526, 317);<br/>context.stroke();<br/><br/>context.lineTo(527, 317);<br/>context.stroke();<br/><br/>context.lineTo(528, 317);<br/>context.stroke();<br/><br/>context.lineTo(527, 317);<br/>context.stroke();<br/><br/>context.lineTo(525, 317);<br/>context.stroke();<br/><br/>context.lineTo(522, 317);<br/>context.stroke();<br/><br/>context.lineTo(519, 317);<br/>context.stroke();<br/><br/>context.lineTo(517, 317);<br/>context.stroke();<br/><br/>context.lineTo(518, 317);<br/>context.stroke();<br/><br/>context.lineTo(519, 317);<br/>context.stroke();<br/><br/>context.lineTo(521, 317);<br/>context.stroke();<br/><br/>context.lineTo(523, 317);<br/>context.stroke();<br/><br/>context.lineTo(524, 318);<br/>context.stroke();<br/><br/>context.lineTo(525, 318);<br/>context.stroke();<br/><br/>context.lineTo(526, 318);<br/>context.stroke();<br/><br/>context.lineTo(527, 319);<br/>context.stroke();<br/><br/>context.lineTo(528, 320);<br/>context.stroke();<br/><br/>context.lineTo(528, 321);<br/>context.stroke();<br/><br/>context.lineTo(528, 322);<br/>context.stroke();<br/><br/>context.lineTo(527, 323);<br/>context.stroke();<br/><br/>context.lineTo(525, 325);<br/>context.stroke();<br/><br/>context.lineTo(524, 326);<br/>context.stroke();<br/><br/>context.lineTo(524, 327);<br/>context.stroke();<br/><br/>context.lineTo(523, 327);<br/>context.stroke();<br/><br/>context.lineTo(522, 326);<br/>context.stroke();<br/><br/>context.lineTo(521, 325);<br/>context.stroke();<br/><br/>context.lineTo(520, 324);<br/>context.stroke();<br/><br/>context.lineTo(519, 323);<br/>context.stroke();<br/><br/>context.lineTo(517, 322);<br/>context.stroke();<br/><br/>context.lineTo(516, 321);<br/>context.stroke();<br/><br/>context.lineTo(517, 321);<br/>context.stroke();<br/><br/>context.lineTo(518, 321);<br/>context.stroke();<br/><br/>context.lineTo(518, 320);<br/>context.stroke();<br/><br/>context.lineTo(519, 320);<br/>context.stroke();<br/><br/>context.lineTo(520, 320);<br/>context.stroke();<br/><br/>context.lineTo(521, 320);<br/>context.stroke();<br/><br/>context.lineTo(522, 320);<br/>context.stroke();<br/><br/>context.lineTo(523, 320);<br/>context.stroke();<br/><br/>context.lineTo(524, 320);<br/>context.stroke();<br/><br/>context.lineTo(525, 320);<br/>context.stroke();<br/><br/>context.lineTo(526, 320);<br/>context.stroke();<br/><br/>context.lineTo(525, 320);<br/>context.stroke();<br/><br/>context.lineTo(523, 320);<br/>context.stroke();<br/><br/>context.lineTo(520, 320);<br/>context.stroke();<br/><br/>context.lineTo(520, 320);<br/>context.stroke();<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(521, 312);<br/>context.lineTo(403,   310);<br/>context.stroke();<br/>context.closePath();<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(404, 310);<br/>context.lineTo(407,   438);<br/>context.stroke();<br/>context.closePath();<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(406, 434);<br/>context.lineTo(266,   437);<br/>context.stroke();<br/>context.closePath();<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(265, 437);<br/>context.lineTo(260,   317);<br/>context.stroke();<br/>context.closePath();<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(260, 317);<br/>context.lineTo(115,   317);<br/>context.stroke();<br/>context.closePath();<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(114, 316);<br/>context.lineTo(114,   221);<br/>context.stroke();<br/>context.closePath();<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(111, 222);<br/>context.lineTo(234,   220);<br/>context.stroke();<br/>context.closePath();<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(234, 219);<br/>context.lineTo(241,   90);<br/>context.stroke();<br/>context.closePath();<br/>        &lt;/script&gt;<br/>&lt;/body&gt;<br/>&lt;/html&gt;<br/>