Develop Reference

Label OCR text in an Image

This codepen demo here reads text from a web image URL (Example: here ) which also displays its text position, for example the number 25 is between [178,183] and [193,183] which has an overall image size of 513 and 277 as stated in the console. So, I have tried to label these positions on image in another demo here, but it seems like the bbox (boundary box) is out of position is shown in my images below. I am trying to highlight text on the image which was read by the OCR using a red rectangle. May I ask how to resolve this issue so that the text are highlighted perfectly and not out of position? Any help will be appreciated :).
I have made sure the image in my demo is scaled to the correct sizes as stated by the console.
<div id="reddot-container">
<img src="https://i.ibb.co/T8ZhGjr/num.jpg" alt="Map" class="img-fluid" width="513px" height="277px">
</div>

Latex2html5 Javascript issue : fill parallelogram

Using latex2html5 Javascript library, I try to fill a parallelogram with grey color and solid fillstyle.
This library has a subset of pstricks latex functions, so my issue may not be solved.
Here's [the link of my current version][2]. My issue is that, once page is loaded and parallelogram is drawn and filled (see grey area), if I move the mouse over or near the figure, the black diagonal segment of the middle disappears automatically and I don't know to prevent this.
The specific part to fill the parallelogram is :
% Fill
\psplot[algebraic,linewidth=1pt, linecolor=grey, fillstyle=solid, fillcolor=grey]{-2}{0}{-2-0.25*x}
\psplot[algebraic,linewidth=1pt, linecolor=grey, fillstyle=solid, fillcolor=grey]{-2}{0}{2-0.25*x}
I didn't find how to fix this behavior, if someone could see what's wrong ...
UPDATE 1:
the concerned diagonal segment disappears only when I move the mouse horizontally and remains displayed if I move vertically the mouse. You can check it on [the above link][2]

Probably due to a Latex2Html glitch. Script refreshes the SVG output on hover event and parallelogram is appended at the end of the SVG, so it overlaps the grid. If your grid is placed before the psplot in your TeX document, try to put it to the end:
\begin{pspicture}
\psplot ...
\psplot ...
\psaxes ...
\end{pspicture}

How to position a element to exact point on the background image?

Background img shown as fig 1, requirement
Width cover mobile phone screen and height adaptive
Position number to exact point (like fig 2)
If changing fig 1 to fig 3, i can position the single line text to exact point.
Please take a look in jsbin. But it did not truly solve the problem.
I have no idea how to do if background img just like fig 1. Any other ideas to to this? Thanks.
Fig 1
Fig 2
Fig 3
English is not my native language; please excuse typing errors.

Please forgive me for my unclear expression and thanks for your attention.
Finally, i find a solution by myself.
convert background image (shown as fig 1) to svg
use svg.js to position the things i want to exact point.
Please take a look in jsbin to see what exactly i want to position

I read your post and figured out that you wand something like that
Fig.1 in your background with numbers at their exact location on forground,
like 20 in second line of yellow block of fig.2 and, 0 and 3
in second line of red block of fig.2
well in your code which you gave at jsbin you are using fig.3 and positioning text on it with code
<div class="chance-msg">还有20次机会，分享即可领取红包</div>
<div class="invite-msg">已邀请0人，还差3人，加油</div>
You can do the same thing by using fig.1 and writing only text only numbers in div you only need to position your div by adding margin left or you can use span to write your numbers in or you can just do that for a quick review
<div class="chance-msg"><span style="visibility:hidden">还有</span>20<span style="visibility:hidden">次机会，分享即可领取红包<span></div>
<div class="invite-msg"><span style="visibility:hidden">已邀请</span>0<span style="visibility:hidden">人，还差</span>3<span style="visibility:hidden">人，加油</span></div>

Fig.1 in your background with numbers at their exact location on forground, like 20 in second line of yellow block of fig.2 and, 0 and 3 in second line of red block of fig.2
well in your code which you gave at jsbin you are using fig.3 and positioning text on it with code
还有20次机会，分享即可领取红包
已邀请0人，还差3人，加油
You can do the same thing by using fig.1 and writing only text only numbers in div you only need to position your div by adding margin left or you can use span to write your numbers in or you can just do that for a quick review
还有20次机会，分享即可领取红包
已邀请0人，还差3人，加油

Create an animatable radial mask for layered images?

Here's what I'm trying to do:
I have two circular SVG images stacked on top of each other. The top image is grayscale. The bottom image is full-color.
What I'd like to do is, via a 1-100 percentage, remove the top image like the hands sweeping the face of a clock based on number. Let's say I'm at 25%. From 12 o'clock to 3 o'clock the grayscale image would be gone like a pie wedge) revealing the identical full-color image below. (see image for more clarity).
example of radial mask concept
Is this possible to do with HTML5/CSS? JQuery? Some way else I'm not considering?

Here is a fiddle of what i came up with http://jsfiddle.net/3a5eubcv/ .Basically your background image would be the red circle and then you have 2 masks floating over it (divs with semitransparent background). Sorry for not adding the javascript for it as well, but for you 25% = transform:rotate(90deg);.When you reach 50%, the right mask should stop and the left one should continue. 75% = .circle-mask-right{transform:rotate(180deg); .circle-mask-left{transform:rotate(90deg);} .I'm sure the code can be simplified, but hopefully this could get you going.

Click on a Canvas - Get a list of options depending where clicked

I am not sure how to do this. Can it be done? How can it be done eligently? And hopefully can it be done without the need for another plugin library (jquery is ok) - I am trying to cut down the number of js files.
I have a canvas with a map in it. The user can click on the map. Then I want a white square to appear near to where the user clicked (rounded corners and a black border) with a few options on it for the user to select one. These can be text options, eg 'Country Summary', 'GDP', etc. Then the user selects one and the info appears in a area to the left, and the white option square automatically disappears.
Is this possible? Can it be done without the need for a window with a blue bar at the top and all the other window baggage?
Hope someone can help.
Jon

Yes, it can be done. You don't have to do it in the canvas, you can use regular HTML for that part.
Just add a new element to the page with the following CSS properties
position:absolute;
display:inline;
(as well as some CSS for rounded corners and black borders)
and then set its X and Y properties to the X and Y mouse coordinates of the event.
Then work with that element as you would with anything else.