HTML5 Wordle Tag Cloud
This is a direct port of my AS3 Wordle Tag Cloud to HTML5. Please read my old blog post for some background.
Some technical notes:
- Thanks to Canvas' RenderingContext2D.measureText(), I can calculate size of the words off browser's stage.
- Initially, I was using Canvas as rendering stage for the tag cloud. However, it demands extra work to make the words interactive. So I decided to use normal block text with CSS3's transform/rotate. The result is texts are searchable and out-of-the-box hyperlinks.
- The position checking process may cause browser hang momentarily if run through all of the words. I have split the process of each word into each RequestAnimationFrame to avoid the script hang.
However, there is still room to improve, for example, enhancing the intersection check and using any angle rotation...