I am working on a process flow. I have used vis library to show the flow. It shows the flow in canvas.
The flow is long and dynamically generated based on user input, so I have provided scroll inside canvas.
So to go to particular step, user has to scroll down. I want to provide search functionality in canvas to make it more user friendly.
Is there any way to provide search functionality in Canvas?
Do you mean character-recognition on existing canvas content (as in your image)?
It would be much easier to modify your vis
library to emit {x:,y:,text:}
objects for each step.
Character-recognition is possible but not practical.
I did a verrrrry simple proof-of-concept demo where:
- The font-size and font-face is known.
- The background is transparent except for the text.
- Each character is surrounded by transparency.
The process went like this:
fillText
a random "unknown" character on a "main" canvas.
- On the main canvas, find the top-left set of opaque pixels which are surrounded by transparency. This set of pixels is the unknown character.
- Copy only that unknown character on a second canvas.
- Set compositing mode to
destination-out
.
- Draw an 'A' onto the second canvas over the unknown character. The compositing mode will erase the opaque pixels of the unknown character.
- Count the remaining opaque pixels on the second canvas.
- If there are "very few" opaque pixels remaining then 'A' is likely the unknown character.
- If there are "many" opaque pixels remaining then 'A' is probably not the unknown character. So repeat steps#3+ using the 'B' character (and then 'C, D, etc').
Refinements that helped recognition:
Remove any anti-aliasing on both the original main canvas and on each 'A, B, ...' character over-drawn.
When drawing the 'A, B, ...' to erase the original unknown character, draw the 'A' multiple times with a 1 pixel offset vertically, horizontally and diagonally. The offsets: [x+0,y+0], [x-1,y], [x+1,y], [x,y-1], [x,y+1], [x-1,y-1], [x-1,y+1], [x+1,y-1], [x+1,y+1]
.
Results
The darned thing worked fairly well -- he says with genuine self-surprise! :-O
Using 36 pixel Verdana font, the code recognized all of the characters from !
through ~
(most of the non-Unicode characters).
But ... The double-quote character was not recognized because it's the one Verdana character that is broken into 2 parts. Visually the double-quote looks like two single quotes separated by space. Step#2 found the left part of the quote but not the right part because of the transparent space.
This is not an effective OCR system ... it's barely a proof-of-concept!!
The font-size & font-face must be exactly known. Since font faces may differ between browsers (and even versions of browsers), the technique probably won't work well across browsers.
The recognition is only for text written on html5 canvas. If given a paper image, the "noise" in the paper will likely cause the technique to fail.
However, it was the basis for a fairly good pattern-matching algorithm where other clues help with the identification process.