Write HTML script to draw rectangle on image

I have:

- a HTML page, showing an image
- coordinates vertical (A-Z) and horizontal (1-20)

I need some HTML code that will draw a rectangle around the given location.

Your code must:

- run on iOS (webview) and Android (webview) sdk!
- not use paid third party libraries
- run off-line (without internet connection)
- be light-weight
_________________________________________________________

The command must have these 5 parameters:

- draw_shape (VerticalPos, HorizontalPos, Width, Color, OnClick)

Vertical Position: A to Z
Horizontal Position: 1 to 20
Width: 1 to 5
Color: #HEX (optional - if not given, then draw tranparent)
OnClick: (optional - if not given, area is not clickable) a 5 digit number, which must be formatted as "show://NNC=12345/"


See attached blank and active images, having YOUR script for:

- draw_shape (B, 7, 1, #ffca18, 12345)
- draw_shape (D, 15, 2, #0ed145, 12345)

Your code must be flexible, so that I can also use it on other images. For that, I guess your code must have the coordinates of the 'Starting point A-1' and then run from there!

The shape must be fixed on the image, allowing the user to zoom-in and still have the correct view.