Make font expand until taking up entire canvas?
david-offord opened this issue · comments
Currently I have this (excuse the profanity):
But I would want the word cloud to take up the entirety of that white space. I have defined the height and weight in css and canvas size. If I increase the canvas after rending obviously the image looks distorted and ugly. Is there any way to achieve this?
I have the same problem, also the other way around: Too many words sometimes lead to words printed outside the canvas. The only way to fix this, AFAIK, is the weightFactor callback: I use the sizeFactor as a custom parameter. The higher it is, the bigger the words are.
wcSettings.weightFactor = function (size) { return size * canvasWidth() / sizeFactor; };
What I am missing, too, is a way to make this more dynamic. Maybe someone has a "formular" to return the perfect size using the callback.
I've worked around this by using HTML rather than canvas and setting the size to something far greater than is needed (like above) and then calculating the bounding box for all elements within, from the bounding box of each of those elements. Once you know that, you can scale/position the container to those dimensions, overflowing the empty surroundings. It's not much more work to add zoom functionality on top of that which I find is useful with large clouds and/or small screens. I'm sure there's a canvas based equivalent for detecting the outer edges of the drawn words (something along the lines of what's used to create the cloud in the first place) but I think it would be less performant. Perhaps some useful info could be exposed after the cloud has been created; even the grid square positions that have been drawn in would be really useful, if available. FYI - I have noticed a bug in Chrome for HTML elements (which I'm just about to report) where the words overlap. This can be seen on the demo page when flicking between canvas/elements. I haven't seen the problem in any other browser that I've checked.
Similar issue occurs when some words have large weights, like even if 6-7 words have 90%+ weights, they will take up the canvas and other words will disappear.
I have this problem as well. I need a high resolution image, so my canvas is 2000 x 2000. The result looks a lot like the original poster's image.
As for making words that are too large fit, I think the drawOutOfBound and shrinkToFit options would help.
@timdream Do you have a solution?
@timdream any suggestions on this?
