CodeName OneShai Almog4 min readintermediate
JavaScript Find in Page: DOM Text Above the Codename One Canvas
Summary
The Codename One JavaScript port now projects eligible text runs from its canvas onto an absolute‑positioned DOM layer, restoring browser find‑in‑page, selection, and accessibility while keeping layout on the canvas. It also adds high‑DPI backing, incremental semantic diffing, and richer input attributes, with a few edge cases still rendered on the canvas.
- Promotes eligible visible text runs to an absolute‑positioned DOM layer, enabling find‑in‑page, selection, and assistive tech without handing layout to the browser.
- Diffs the semantic tree incrementally so element identity and listeners persist across scroll invalidations, preserving focus and selection.
- Uses a high‑DPI OffscreenCanvas backing surface and updates devicePixelRatio on zoom or display changes for crisp rendering.
- Enriches native inputs with inputmode, autocomplete, autocapitalize, and spellcheck attributes, fixing password‑field handling bugs.
Engineers building web‑based UI frameworks need a practical way to combine canvas rendering with native browser features, and this post shows a concrete solution.
6/10