Draw lines on an image on web page using html and javascript

Question

I opened the code from a web page and see this section:

<div id="box-5548" class="box box--size-size_xl" data-height="1140" data-width="1520">
<img alt='blocket' height='1140' src='gill.jpg' width='1520'><script type="text/plain" class="js-data">
{"lines":[[{"x":0.4,"y":0.4351},{"x":0.4605,"y":0.3158},{"x":0.4921,"y":0.214},{"x":0.5039,"y":0.2035}],
[{"x":0.4474,"y":0.6456},{"x":0.3,"y":0.3947},{"x":0.2961,"y":0.3737},{"x":0.2895,"y":0.3193},{"x":0.2842,"y":0.2965},{"x":0.2763,"y":0.2579}],
[{"x":0.4645,"y":0.6579},{"x":0.4737,"y":0.5439},{"x":0.4605,"y":0.4281},{"x":0.475,"y":0.314},{"x":0.4987,"y":0.2351},{"x":0.5105,"y":0.2105}],
[{"x":0.4895,"y":0.7474},{"x":0.4289,"y":0.6298}],
[{"x":0.5132,"y":0.7474},{"x":0.4816,"y":0.6702},{"x":0.475,"y":0.5982},{"x":0.4803,"y":0.5193},{"x":0.4724,"y":0.4333},{"x":0.4855,"y":0.3053},{"x":0.5079,"y":0.2439},{"x":0.5197,"y":0.2175}],
[{"x":0.6658,"y":0.3754},{"x":0.6684,"y":0.293},{"x":0.6724,"y":0.2404},{"x":0.6684,"y":0.2123}],
[{"x":0.8579,"y":0.5421},{"x":0.7526,"y":0.4509},{"x":0.6553,"y":0.4053},{"x":0.5197,"y":0.4193},{"x":0.4908,"y":0.414},{"x":0.4882,"y":0.3895},{"x":0.4908,"y":0.3491},{"x":0.5132,"y":0.2579},{"x":0.5289,"y":0.2281}]],
"options":{"style":"de_emphasized"},
"strong_line":[{"x":0.4895,"y":0.7474},{"x":0.4289,"y":0.6298}]}</script>
</div>

I am trying to figure out what is going on but I don't quite understand.

I think this is the image: gill.jpg

Then, when looking at the page in a browser, lines are being drawn on the image (not altering the original gill.jpg).

Obvously the coordinates above are the seven lines drawn.

But the drawing itself is done by a script on the server? (js-data)?

Is there a well-know technique for doing this, is it possible to read about it somewhere?