&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(28, 305);<br/><br/>context.lineTo(37, 304);<br/>context.stroke();<br/><br/>context.lineTo(39, 302);<br/>context.stroke();<br/><br/>context.lineTo(40, 300);<br/>context.stroke();<br/><br/>context.lineTo(48, 293);<br/>context.stroke();<br/><br/>context.lineTo(58, 286);<br/>context.stroke();<br/><br/>context.lineTo(71, 279);<br/>context.stroke();<br/><br/>context.lineTo(87, 271);<br/>context.stroke();<br/><br/>context.lineTo(103, 261);<br/>context.stroke();<br/><br/>context.lineTo(122, 252);<br/>context.stroke();<br/><br/>context.lineTo(143, 246);<br/>context.stroke();<br/><br/>context.lineTo(159, 244);<br/>context.stroke();<br/><br/>context.lineTo(169, 244);<br/>context.stroke();<br/><br/>context.lineTo(173, 244);<br/>context.stroke();<br/><br/>context.lineTo(176, 244);<br/>context.stroke();<br/><br/>context.lineTo(179, 247);<br/>context.stroke();<br/><br/>context.lineTo(185, 253);<br/>context.stroke();<br/><br/>context.lineTo(190, 258);<br/>context.stroke();<br/><br/>context.lineTo(200, 262);<br/>context.stroke();<br/><br/>context.lineTo(213, 269);<br/>context.stroke();<br/><br/>context.lineTo(228, 273);<br/>context.stroke();<br/><br/>context.lineTo(239, 276);<br/>context.stroke();<br/><br/>context.lineTo(249, 278);<br/>context.stroke();<br/><br/>context.lineTo(265, 279);<br/>context.stroke();<br/><br/>context.lineTo(280, 279);<br/>context.stroke();<br/><br/>context.lineTo(294, 279);<br/>context.stroke();<br/><br/>context.lineTo(302, 279);<br/>context.stroke();<br/><br/>context.lineTo(308, 278);<br/>context.stroke();<br/><br/>context.lineTo(311, 278);<br/>context.stroke();<br/><br/>context.lineTo(316, 278);<br/>context.stroke();<br/><br/>context.lineTo(320, 280);<br/>context.stroke();<br/><br/>context.lineTo(325, 285);<br/>context.stroke();<br/><br/>context.lineTo(334, 289);<br/>context.stroke();<br/><br/>context.lineTo(348, 292);<br/>context.stroke();<br/><br/>context.lineTo(362, 294);<br/>context.stroke();<br/><br/>context.lineTo(376, 295);<br/>context.stroke();<br/><br/>context.lineTo(389, 295);<br/>context.stroke();<br/><br/>context.lineTo(403, 295);<br/>context.stroke();<br/><br/>context.lineTo(416, 295);<br/>context.stroke();<br/><br/>context.lineTo(426, 295);<br/>context.stroke();<br/><br/>context.lineTo(440, 294);<br/>context.stroke();<br/><br/>context.lineTo(446, 293);<br/>context.stroke();<br/><br/>context.lineTo(450, 290);<br/>context.stroke();<br/><br/>context.lineTo(452, 290);<br/>context.stroke();<br/><br/>context.lineTo(454, 289);<br/>context.stroke();<br/><br/>context.lineTo(457, 288);<br/>context.stroke();<br/><br/>context.lineTo(462, 288);<br/>context.stroke();<br/><br/>context.lineTo(466, 288);<br/>context.stroke();<br/><br/>context.lineTo(469, 288);<br/>context.stroke();<br/><br/>context.lineTo(473, 288);<br/>context.stroke();<br/><br/>context.lineTo(477, 288);<br/>context.stroke();<br/><br/>context.lineTo(487, 292);<br/>context.stroke();<br/><br/>context.lineTo(496, 293);<br/>context.stroke();<br/><br/>context.lineTo(502, 294);<br/>context.stroke();<br/><br/>context.lineTo(505, 295);<br/>context.stroke();<br/><br/>context.lineTo(507, 296);<br/>context.stroke();<br/><br/>context.lineTo(508, 296);<br/>context.stroke();<br/><br/>context.lineTo(509, 296);<br/>context.stroke();<br/><br/>context.lineTo(511, 297);<br/>context.stroke();<br/><br/>context.lineTo(514, 298);<br/>context.stroke();<br/><br/>context.lineTo(516, 299);<br/>context.stroke();<br/><br/>context.lineTo(519, 299);<br/>context.stroke();<br/><br/>context.lineTo(522, 300);<br/>context.stroke();<br/><br/>context.lineTo(524, 301);<br/>context.stroke();<br/><br/>context.lineTo(528, 302);<br/>context.stroke();<br/><br/>context.lineTo(532, 304);<br/>context.stroke();<br/><br/>context.lineTo(535, 305);<br/>context.stroke();<br/><br/>context.lineTo(540, 305);<br/>context.stroke();<br/><br/>context.lineTo(542, 305);<br/>context.stroke();<br/><br/>context.lineTo(544, 305);<br/>context.stroke();<br/><br/>context.lineTo(546, 305);<br/>context.stroke();<br/><br/>context.lineTo(548, 305);<br/>context.stroke();<br/><br/>context.lineTo(555, 302);<br/>context.stroke();<br/><br/>context.lineTo(557, 301);<br/>context.stroke();<br/><br/>context.lineTo(559, 301);<br/>context.stroke();<br/><br/>context.lineTo(561, 301);<br/>context.stroke();<br/><br/>context.lineTo(564, 301);<br/>context.stroke();<br/><br/>context.lineTo(566, 301);<br/>context.stroke();<br/><br/>context.lineTo(567, 301);<br/>context.stroke();<br/><br/>context.lineTo(570, 301);<br/>context.stroke();<br/><br/>context.lineTo(572, 301);<br/>context.stroke();<br/><br/>context.lineTo(575, 301);<br/>context.stroke();<br/><br/>context.lineTo(578, 301);<br/>context.stroke();<br/><br/>context.lineTo(582, 301);<br/>context.stroke();<br/><br/>context.lineTo(589, 301);<br/>context.stroke();<br/><br/>context.lineTo(595, 301);<br/>context.stroke();<br/><br/>context.lineTo(599, 307);<br/>context.stroke();<br/><br/>context.lineTo(595, 309);<br/>context.stroke();<br/><br/>context.lineTo(591, 312);<br/>context.stroke();<br/><br/>context.lineTo(588, 315);<br/>context.stroke();<br/><br/>context.lineTo(583, 319);<br/>context.stroke();<br/><br/>context.lineTo(573, 324);<br/>context.stroke();<br/><br/>context.lineTo(561, 331);<br/>context.stroke();<br/><br/>context.lineTo(541, 339);<br/>context.stroke();<br/><br/>context.lineTo(518, 349);<br/>context.stroke();<br/><br/>context.lineTo(495, 356);<br/>context.stroke();<br/><br/>context.lineTo(466, 366);<br/>context.stroke();<br/><br/>context.lineTo(438, 374);<br/>context.stroke();<br/><br/>context.lineTo(408, 384);<br/>context.stroke();<br/><br/>context.lineTo(375, 389);<br/>context.stroke();<br/><br/>context.lineTo(328, 390);<br/>context.stroke();<br/><br/>context.lineTo(271, 388);<br/>context.stroke();<br/><br/>context.lineTo(206, 369);<br/>context.stroke();<br/><br/>context.lineTo(140, 346);<br/>context.stroke();<br/><br/>context.lineTo(98, 330);<br/>context.stroke();<br/><br/>context.lineTo(79, 320);<br/>context.stroke();<br/><br/>context.lineTo(59, 317);<br/>context.stroke();<br/><br/>context.lineTo(45, 313);<br/>context.stroke();<br/><br/>context.lineTo(42, 312);<br/>context.stroke();<br/><br/>context.lineTo(40, 312);<br/>context.stroke();<br/><br/>context.lineTo(39, 312);<br/>context.stroke();<br/><br/>context.lineTo(38, 312);<br/>context.stroke();<br/><br/>context.lineTo(37, 313);<br/>context.stroke();<br/><br/>context.lineTo(36, 314);<br/>context.stroke();<br/><br/>context.lineTo(34, 315);<br/>context.stroke();<br/><br/>context.lineTo(32, 317);<br/>context.stroke();<br/><br/>context.lineTo(31, 318);<br/>context.stroke();<br/><br/>context.lineTo(30, 320);<br/>context.stroke();<br/><br/>context.lineTo(28, 322);<br/>context.stroke();<br/><br/>context.lineTo(28, 321);<br/>context.stroke();<br/><br/>context.lineTo(28, 320);<br/>context.stroke();<br/><br/>context.lineTo(28, 318);<br/>context.stroke();<br/><br/>context.lineTo(28, 317);<br/>context.stroke();<br/><br/>context.lineTo(28, 315);<br/>context.stroke();<br/><br/>context.lineTo(28, 314);<br/>context.stroke();<br/><br/>context.lineTo(28, 312);<br/>context.stroke();<br/><br/>context.lineTo(28, 311);<br/>context.stroke();<br/><br/>context.lineTo(28, 310);<br/>context.stroke();<br/><br/>context.lineTo(28, 309);<br/>context.stroke();<br/><br/>context.lineTo(29, 309);<br/>context.stroke();<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(29, 309);<br/><br/>context.lineTo(29, 309);<br/>context.stroke();<br/><br/>context.strokeStyle = '#FFFFFF';<br/>context.beginPath();<br/>context.moveTo(20, 309);<br/><br/>context.lineTo(21, 308);<br/>context.stroke();<br/><br/>context.lineTo(23, 308);<br/>context.stroke();<br/><br/>context.lineTo(24, 308);<br/>context.stroke();<br/><br/>context.lineTo(26, 308);<br/>context.stroke();<br/><br/>context.lineTo(27, 308);<br/>context.stroke();<br/><br/>context.lineTo(29, 308);<br/>context.stroke();<br/><br/>context.lineTo(30, 308);<br/>context.stroke();<br/><br/>context.lineTo(32, 308);<br/>context.stroke();<br/><br/>context.lineTo(33, 308);<br/>context.stroke();<br/><br/>context.lineTo(34, 308);<br/>context.stroke();<br/><br/>context.lineTo(36, 308);<br/>context.stroke();<br/><br/>context.lineTo(37, 308);<br/>context.stroke();<br/><br/>context.lineTo(38, 311);<br/>context.stroke();<br/><br/>context.lineTo(38, 314);<br/>context.stroke();<br/><br/>context.lineTo(38, 317);<br/>context.stroke();<br/><br/>context.lineTo(38, 322);<br/>context.stroke();<br/><br/>context.lineTo(38, 327);<br/>context.stroke();<br/><br/>context.lineTo(38, 328);<br/>context.stroke();<br/><br/>context.lineTo(38, 330);<br/>context.stroke();<br/><br/>context.lineTo(37, 331);<br/>context.stroke();<br/><br/>context.lineTo(35, 331);<br/>context.stroke();<br/><br/>context.lineTo(32, 331);<br/>context.stroke();<br/><br/>context.lineTo(31, 328);<br/>context.stroke();<br/><br/>context.lineTo(28, 322);<br/>context.stroke();<br/><br/>context.lineTo(27, 319);<br/>context.stroke();<br/><br/>context.lineTo(27, 315);<br/>context.stroke();<br/><br/>context.lineTo(27, 313);<br/>context.stroke();<br/><br/>context.lineTo(27, 311);<br/>context.stroke();<br/><br/>context.lineTo(27, 310);<br/>context.stroke();<br/><br/>context.lineTo(27, 308);<br/>context.stroke();<br/><br/>context.lineTo(27, 307);<br/>context.stroke();<br/><br/>context.lineTo(28, 307);<br/>context.stroke();<br/><br/>context.lineTo(29, 307);<br/>context.stroke();<br/><br/>context.lineTo(31, 312);<br/>context.stroke();<br/><br/>context.lineTo(32, 314);<br/>context.stroke();<br/><br/>context.lineTo(32, 318);<br/>context.stroke();<br/><br/>context.lineTo(32, 321);<br/>context.stroke();<br/><br/>context.lineTo(32, 323);<br/>context.stroke();<br/><br/>context.lineTo(32, 325);<br/>context.stroke();<br/><br/>context.lineTo(32, 326);<br/>context.stroke();<br/><br/>context.lineTo(30, 326);<br/>context.stroke();<br/><br/>context.lineTo(28, 322);<br/>context.stroke();<br/><br/>context.lineTo(27, 316);<br/>context.stroke();<br/><br/>context.lineTo(27, 312);<br/>context.stroke();<br/><br/>context.lineTo(29, 311);<br/>context.stroke();<br/><br/>context.lineTo(32, 311);<br/>context.stroke();<br/><br/>context.lineTo(35, 311);<br/>context.stroke();<br/><br/>context.lineTo(37, 311);<br/>context.stroke();<br/><br/>context.lineTo(38, 311);<br/>context.stroke();<br/><br/>context.lineTo(39, 311);<br/>context.stroke();<br/><br/>context.lineTo(39, 312);<br/>context.stroke();<br/><br/>context.lineTo(39, 314);<br/>context.stroke();<br/><br/>context.lineTo(37, 318);<br/>context.stroke();<br/><br/>context.lineTo(33, 319);<br/>context.stroke();<br/><br/>context.lineTo(29, 320);<br/>context.stroke();<br/><br/>context.lineTo(26, 320);<br/>context.stroke();<br/><br/>context.lineTo(24, 320);<br/>context.stroke();<br/><br/>context.lineTo(23, 320);<br/>context.stroke();<br/><br/>context.lineTo(23, 318);<br/>context.stroke();<br/><br/>context.lineTo(23, 315);<br/>context.stroke();<br/><br/>context.lineTo(24, 314);<br/>context.stroke();<br/><br/>context.lineTo(25, 314);<br/>context.stroke();<br/><br/>context.lineTo(26, 314);<br/>context.stroke();<br/><br/>context.lineTo(27, 314);<br/>context.stroke();<br/><br/>context.lineTo(28, 314);<br/>context.stroke();<br/><br/>context.lineTo(28, 315);<br/>context.stroke();<br/><br/>context.lineTo(28, 318);<br/>context.stroke();<br/><br/>context.lineTo(28, 320);<br/>context.stroke();<br/><br/>context.lineTo(28, 321);<br/>context.stroke();<br/><br/>context.lineTo(27, 322);<br/>context.stroke();<br/><br/>context.lineTo(24, 322);<br/>context.stroke();<br/><br/>context.lineTo(22, 322);<br/>context.stroke();<br/><br/>context.lineTo(21, 321);<br/>context.stroke();<br/><br/>context.lineTo(21, 319);<br/>context.stroke();<br/><br/>context.lineTo(21, 317);<br/>context.stroke();<br/><br/>context.lineTo(21, 315);<br/>context.stroke();<br/><br/>context.lineTo(23, 315);<br/>context.stroke();<br/><br/>context.lineTo(27, 315);<br/>context.stroke();<br/><br/>context.lineTo(29, 315);<br/>context.stroke();<br/><br/>context.lineTo(30, 315);<br/>context.stroke();<br/><br/>context.lineTo(30, 317);<br/>context.stroke();<br/><br/>context.lineTo(30, 320);<br/>context.stroke();<br/><br/>context.lineTo(30, 322);<br/>context.stroke();<br/><br/>context.lineTo(29, 326);<br/>context.stroke();<br/><br/>context.lineTo(26, 326);<br/>context.stroke();<br/><br/>context.lineTo(23, 326);<br/>context.stroke();<br/><br/>context.lineTo(21, 326);<br/>context.stroke();<br/><br/>context.lineTo(19, 325);<br/>context.stroke();<br/><br/>context.lineTo(17, 322);<br/>context.stroke();<br/><br/>context.lineTo(17, 321);<br/>context.stroke();<br/><br/>context.lineTo(17, 319);<br/>context.stroke();<br/><br/>context.lineTo(17, 319);<br/>context.stroke();<br/>        &lt;/script&gt;<br/>&lt;/body&gt;<br/>&lt;/html&gt;<br/>