&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.strokeRect(72.22000122070312, 105.55999755859375, 238.88998413085937, 142.22000122070312);<br/><br/>context.strokeStyle = '#000000';<br/>context.save();<br/>context.translate(450.55499267578125, 178.88999938964844);<br/>context.scale(1, 0.7013443432066898);<br/>context.beginPath();<br/>context.arc(0, 0, 104, 0, 6.283185307179586, false);<br/>context.stroke();<br/>context.closePath();<br/>context.restore();<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(310, 182.22000122070312);<br/>context.lineTo(344.4499816894531,   183.3300018310547);<br/>context.stroke();<br/>context.closePath();<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(115.55999755859375, 173.3300018310547);<br/><br/>context.lineTo(115.55999755859375, 173.3300018310547);<br/>context.stroke();<br/><br/>context.strokeStyle = '#000000';<br/>context.beginPath();<br/>context.moveTo(108.88999938964844, 184.44000244140625);<br/><br/>context.lineTo(112.22000122070312, 184.44000244140625);<br/>context.stroke();<br/><br/>context.lineTo(114.44999694824219, 184.44000244140625);<br/>context.stroke();<br/><br/>context.lineTo(116.66999816894531, 185.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(121.11000061035156, 186.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(123.32999420166015, 186.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(125.55999755859375, 186.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(130, 187.77999877929687);<br/>context.stroke();<br/><br/>context.lineTo(133.3300018310547, 187.77999877929687);<br/>context.stroke();<br/><br/>context.lineTo(136.6699981689453, 188.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(138.88999938964844, 188.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(140, 188.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(142.22000122070312, 190);<br/>context.stroke();<br/><br/>context.lineTo(143.3300018310547, 190);<br/>context.stroke();<br/><br/>context.lineTo(144.4499969482422, 190);<br/>context.stroke();<br/><br/>context.lineTo(145.55999755859375, 191.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(146.6699981689453, 192.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(147.77999877929687, 192.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(147.77999877929687, 193.3300018310547);<br/>context.stroke();<br/><br/>context.lineTo(150, 194.44000244140625);<br/>context.stroke();<br/><br/>context.lineTo(152.22000122070312, 195.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(153.3300018310547, 196.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(155.55999755859375, 196.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(156.6699981689453, 197.77999877929687);<br/>context.stroke();<br/><br/>context.lineTo(157.77999877929687, 198.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(160, 200);<br/>context.stroke();<br/><br/>context.lineTo(161.11000061035156, 201.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(162.22000122070312, 201.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(163.3300018310547, 202.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(164.4499969482422, 203.3300018310547);<br/>context.stroke();<br/><br/>context.lineTo(165.55999755859375, 204.44000244140625);<br/>context.stroke();<br/><br/>context.lineTo(166.6699981689453, 205.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(167.77999877929687, 206.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(168.88999938964844, 208.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(170, 208.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(170, 210);<br/>context.stroke();<br/><br/>context.lineTo(170, 211.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(172.22000122070312, 212.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(174.4499969482422, 215.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(174.4499969482422, 216.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(175.55999755859375, 216.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(176.6699981689453, 217.77999877929687);<br/>context.stroke();<br/><br/>context.lineTo(176.6699981689453, 218.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(177.77999877929687, 220);<br/>context.stroke();<br/><br/>context.lineTo(178.88999938964844, 221.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(180, 222.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(181.11000061035156, 222.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(182.22000122070312, 222.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(183.3300018310547, 222.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(186.6699981689453, 222.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(188.88999938964844, 222.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(192.22000122070312, 222.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(195.55999755859375, 222.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(201.11000061035156, 222.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(208.88999938964844, 220);<br/>context.stroke();<br/><br/>context.lineTo(215.55999755859375, 218.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(223.3300018310547, 216.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(231.11000061035156, 215.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(235.55999755859375, 213.3300018310547);<br/>context.stroke();<br/><br/>context.lineTo(240, 212.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(241.11000061035156, 211.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(244.4499969482422, 210);<br/>context.stroke();<br/><br/>context.lineTo(246.6699981689453, 208.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(246.6699981689453, 207.77999877929687);<br/>context.stroke();<br/><br/>context.lineTo(247.77999877929687, 206.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(247.77999877929687, 204.44000244140625);<br/>context.stroke();<br/><br/>context.lineTo(247.77999877929687, 203.3300018310547);<br/>context.stroke();<br/><br/>context.lineTo(247.77999877929687, 202.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(247.77999877929687, 201.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(247.77999877929687, 200);<br/>context.stroke();<br/><br/>context.lineTo(247.77999877929687, 197.77999877929687);<br/>context.stroke();<br/><br/>context.lineTo(246.6699981689453, 195.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(246.6699981689453, 191.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(245.55999755859375, 190);<br/>context.stroke();<br/><br/>context.lineTo(244.4499969482422, 187.77999877929687);<br/>context.stroke();<br/><br/>context.lineTo(243.3300018310547, 185.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(241.11000061035156, 184.44000244140625);<br/>context.stroke();<br/><br/>context.lineTo(240, 182.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(240, 178.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(237.77999877929687, 176.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(236.6699981689453, 175.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(234.4499969482422, 172.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(233.3300018310547, 172.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(231.11000061035156, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(228.88999938964844, 167.77999877929687);<br/>context.stroke();<br/><br/>context.lineTo(225.55999755859375, 166.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(220, 165.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(218.88999938964844, 165.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(215.55999755859375, 165.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(213.3300018310547, 164.44000244140625);<br/>context.stroke();<br/><br/>context.lineTo(212.22000122070312, 164.44000244140625);<br/>context.stroke();<br/><br/>context.lineTo(210, 164.44000244140625);<br/>context.stroke();<br/><br/>context.lineTo(206.6699981689453, 164.44000244140625);<br/>context.stroke();<br/><br/>context.strokeStyle = '#FFFFFF';<br/>context.beginPath();<br/>context.moveTo(236.6699981689453, 202.22000122070312);<br/><br/>context.lineTo(237.77999877929687, 201.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(237.77999877929687, 201.11000061035156);<br/>context.stroke();<br/><br/>context.strokeStyle = '#FFFFFF';<br/>context.beginPath();<br/>context.moveTo(247.77999877929687, 193.3300018310547);<br/><br/>context.lineTo(248.88999938964844, 193.3300018310547);<br/>context.stroke();<br/><br/>context.lineTo(250, 192.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(250, 191.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(251.11000061035156, 191.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(251.11000061035156, 190);<br/>context.stroke();<br/><br/>context.lineTo(251.11000061035156, 188.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(251.11000061035156, 187.77999877929687);<br/>context.stroke();<br/><br/>context.lineTo(251.11000061035156, 186.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(251.11000061035156, 185.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(251.11000061035156, 184.44000244140625);<br/>context.stroke();<br/><br/>context.lineTo(251.11000061035156, 183.3300018310547);<br/>context.stroke();<br/><br/>context.lineTo(251.11000061035156, 182.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(250, 181.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(248.88999938964844, 180);<br/>context.stroke();<br/><br/>context.lineTo(248.88999938964844, 178.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(247.77999877929687, 177.77999877929687);<br/>context.stroke();<br/><br/>context.lineTo(246.6699981689453, 177.77999877929687);<br/>context.stroke();<br/><br/>context.lineTo(246.6699981689453, 176.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(245.55999755859375, 175.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(244.4499969482422, 175.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(244.4499969482422, 174.44000244140625);<br/>context.stroke();<br/><br/>context.lineTo(243.3300018310547, 174.44000244140625);<br/>context.stroke();<br/><br/>context.lineTo(242.22000122070312, 174.44000244140625);<br/>context.stroke();<br/><br/>context.lineTo(241.11000061035156, 174.44000244140625);<br/>context.stroke();<br/><br/>context.lineTo(240, 173.3300018310547);<br/>context.stroke();<br/><br/>context.lineTo(238.88999938964844, 173.3300018310547);<br/>context.stroke();<br/><br/>context.lineTo(237.77999877929687, 173.3300018310547);<br/>context.stroke();<br/><br/>context.lineTo(236.6699981689453, 173.3300018310547);<br/>context.stroke();<br/><br/>context.lineTo(235.55999755859375, 172.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(234.4499969482422, 172.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(233.3300018310547, 172.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(232.22000122070312, 172.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(231.11000061035156, 172.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(230, 171.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(228.88999938964844, 171.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(227.77999877929687, 170);<br/>context.stroke();<br/><br/>context.lineTo(226.6699981689453, 170);<br/>context.stroke();<br/><br/>context.lineTo(225.55999755859375, 170);<br/>context.stroke();<br/><br/>context.lineTo(224.4499969482422, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(223.3300018310547, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(222.22000122070312, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(221.11000061035156, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(220, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(218.88999938964844, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(217.77999877929687, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(216.6699981689453, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(215.55999755859375, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(213.3300018310547, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(212.22000122070312, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(211.11000061035156, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(210, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(208.88999938964844, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(207.77999877929687, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(206.6699981689453, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(204.4499969482422, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(203.3300018310547, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(201.11000061035156, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(200, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(198.88999938964844, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(197.77999877929687, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(200, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(201.11000061035156, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(204.4499969482422, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(207.77999877929687, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(210, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(211.11000061035156, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(213.3300018310547, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(215.55999755859375, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(218.88999938964844, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(220, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(226.6699981689453, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(232.22000122070312, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(237.77999877929687, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(240, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(241.11000061035156, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(242.22000122070312, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(243.3300018310547, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(244.4499969482422, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(243.3300018310547, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(242.22000122070312, 168.88999938964844);<br/>context.stroke();<br/><br/>context.lineTo(237.77999877929687, 167.77999877929687);<br/>context.stroke();<br/><br/>context.lineTo(231.11000061035156, 166.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(226.6699981689453, 166.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(223.3300018310547, 166.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(220, 166.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(217.77999877929687, 166.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(215.55999755859375, 166.6699981689453);<br/>context.stroke();<br/><br/>context.lineTo(213.3300018310547, 165.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(211.11000061035156, 165.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(210, 165.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(208.88999938964844, 165.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(207.77999877929687, 165.55999755859375);<br/>context.stroke();<br/><br/>context.lineTo(206.6699981689453, 164.44000244140625);<br/>context.stroke();<br/><br/>context.lineTo(205.55999755859375, 164.44000244140625);<br/>context.stroke();<br/><br/>context.lineTo(203.3300018310547, 163.3300018310547);<br/>context.stroke();<br/><br/>context.lineTo(202.22000122070312, 163.3300018310547);<br/>context.stroke();<br/><br/>context.lineTo(201.11000061035156, 163.3300018310547);<br/>context.stroke();<br/><br/>context.lineTo(200, 162.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(198.88999938964844, 162.22000122070312);<br/>context.stroke();<br/><br/>context.lineTo(198.88999938964844, 161.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(200, 161.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(202.22000122070312, 161.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(205.55999755859375, 161.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(207.77999877929687, 161.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(210, 161.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(213.3300018310547, 161.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(217.77999877929687, 161.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(222.22000122070312, 161.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(225.55999755859375, 161.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(231.11000061035156, 161.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(233.3300018310547, 161.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(238.88999938964844, 161.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(242.22000122070312, 161.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(243.3300018310547, 161.11000061035156);<br/>context.stroke();<br/><br/>context.lineTo(243.3300018310547, 161.11000061035156);<br/>context.stroke();<br/>        &lt;/script&gt;<br/>&lt;/body&gt;<br/>&lt;/html&gt;<br/>