more responsive way of filling the container?

[LukeMcLachlan]

I have been able to use to fill the width of the screen with words and maintain an aspect ratio of 0.65, however it is very pixelated with wider viewports. I understand why this is, because you generate an image for canvas elements.

So what I did was replace canvas with a div. The problem I am having now is that I can't find a way of making this responsive, so that the cloud fills viewports automatically. I've read the API documentation, particularly weightFactor and gridSize, however I wonder how I can implement these? I tried (as per your index.js file):

weightFactor: function (size) {
    return Math.pow(size, 2.3) * $('#canvas').width() / 1024;
}

however the text was enormous and made the browser hang. When I changed 1024 to a figure closer to 3000 things looked better, but 3000 is arbitrarily generated.

Any help greatly appreciated. For example on http://www.wordclouds.com/ I see that you have a Fill shape, how would I implement this?

[timdream]

Yes, all the numbers are arbitrarily. It's possible to deduce these scaling factors beforehand definitely by arranging the canvas first without drawing it, but significant work needs to be done before that could happen. Even with that you cannot make the word cloud "responsive", i.e. it will not responsive to changes on windows side.

I think you are on the right track and if 3000 works for you, you should just use it, for now. Before I have time to do what's said above...

I did not make wordclouds.com. I actually did not know it exists. I can only answer questions on my instance of the application ( https://timdream.org/wordcloud2.js/ )

Thanks for filing the issue!

[cedricwalter]

I achieve something "close" to responsiveness... work for me at least.

I set a default size

<canvas id="canvas" 
width="400px"
height="400px">

I used for weight factor something like

weightFactor: function (size) {
  return size * (1 + jQuery('#canvas').width() / jQuery('#canvas').height());
},

and add a handler on windows resize

	function resize(){    
            var parentWidth = jQuery('#canvas').parent().outerWidth();
            var parentHeight =  jQuery('#canvas').parent().outerHeight();
            jQuery('#canvas').attr('width', parentWidth);
            jQuery('#canvas').attr('height', parentWidth * 1.5);
            // draw cloud here
         }

         jQuery(document).ready(function(){
            resize();
            jQuery(window).on('resize', function(){                      
                resize();
            });
        });