title: Draw lines on an image on web page using html and javascript
body: <p>I opened the code from a web page and see this section:</p>
  <pre><code>&lt;div id=&quot;box-5548&quot; class=&quot;box box--size-size_xl&quot; data-height=&quot;1140&quot; data-width=&quot;1520&quot;&gt;
  &lt;img alt='blocket' height='1140' src='gill.jpg' width='1520'&gt;&lt;script type=&quot;text/plain&quot; class=&quot;js-data&quot;&gt;
  {&quot;lines&quot;:[[{&quot;x&quot;:0.4,&quot;y&quot;:0.4351},{&quot;x&quot;:0.4605,&quot;y&quot;:0.3158},{&quot;x&quot;:0.4921,&quot;y&quot;:0.214},{&quot;x&quot;:0.5039,&quot;y&quot;:0.2035}],
  [{&quot;x&quot;:0.4474,&quot;y&quot;:0.6456},{&quot;x&quot;:0.3,&quot;y&quot;:0.3947},{&quot;x&quot;:0.2961,&quot;y&quot;:0.3737},{&quot;x&quot;:0.2895,&quot;y&quot;:0.3193},{&quot;x&quot;:0.2842,&quot;y&quot;:0.2965},{&quot;x&quot;:0.2763,&quot;y&quot;:0.2579}],
  [{&quot;x&quot;:0.4645,&quot;y&quot;:0.6579},{&quot;x&quot;:0.4737,&quot;y&quot;:0.5439},{&quot;x&quot;:0.4605,&quot;y&quot;:0.4281},{&quot;x&quot;:0.475,&quot;y&quot;:0.314},{&quot;x&quot;:0.4987,&quot;y&quot;:0.2351},{&quot;x&quot;:0.5105,&quot;y&quot;:0.2105}],
  [{&quot;x&quot;:0.4895,&quot;y&quot;:0.7474},{&quot;x&quot;:0.4289,&quot;y&quot;:0.6298}],
  [{&quot;x&quot;:0.5132,&quot;y&quot;:0.7474},{&quot;x&quot;:0.4816,&quot;y&quot;:0.6702},{&quot;x&quot;:0.475,&quot;y&quot;:0.5982},{&quot;x&quot;:0.4803,&quot;y&quot;:0.5193},{&quot;x&quot;:0.4724,&quot;y&quot;:0.4333},{&quot;x&quot;:0.4855,&quot;y&quot;:0.3053},{&quot;x&quot;:0.5079,&quot;y&quot;:0.2439},{&quot;x&quot;:0.5197,&quot;y&quot;:0.2175}],
  [{&quot;x&quot;:0.6658,&quot;y&quot;:0.3754},{&quot;x&quot;:0.6684,&quot;y&quot;:0.293},{&quot;x&quot;:0.6724,&quot;y&quot;:0.2404},{&quot;x&quot;:0.6684,&quot;y&quot;:0.2123}],
  [{&quot;x&quot;:0.8579,&quot;y&quot;:0.5421},{&quot;x&quot;:0.7526,&quot;y&quot;:0.4509},{&quot;x&quot;:0.6553,&quot;y&quot;:0.4053},{&quot;x&quot;:0.5197,&quot;y&quot;:0.4193},{&quot;x&quot;:0.4908,&quot;y&quot;:0.414},{&quot;x&quot;:0.4882,&quot;y&quot;:0.3895},{&quot;x&quot;:0.4908,&quot;y&quot;:0.3491},{&quot;x&quot;:0.5132,&quot;y&quot;:0.2579},{&quot;x&quot;:0.5289,&quot;y&quot;:0.2281}]],
  &quot;options&quot;:{&quot;style&quot;:&quot;de_emphasized&quot;},
  &quot;strong_line&quot;:[{&quot;x&quot;:0.4895,&quot;y&quot;:0.7474},{&quot;x&quot;:0.4289,&quot;y&quot;:0.6298}]}&lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I am trying to figure out what is going on but I don't quite understand.</p>
  <p>I think this is the image: gill.jpg</p>
  <p>Then, when looking at the page in a browser, lines are being drawn on the image (not altering the original gill.jpg).</p>
  <p>Obvously the coordinates above are the seven lines drawn.</p>
  <p>But the drawing itself is done by a script on the server? (js-data)?</p>
  <p>Is there a well-know technique for doing this, is it possible to read about it somewhere?</p>