goat1000 / TagCanvas

HTML5 canvas-based tag cloud
240 stars 81 forks source link

fallback? #3

Closed andreas-stricker closed 9 years ago

andreas-stricker commented 10 years ago

if the browser doesn't support html5 canvas i want to display an image but in these browsers tha canvas is empty and no image is displayed.

Her is my code:

// tagCloud
if($('#tagCloudContainer').length){
    try {
      TagCanvas.Start('tagCloudCanvas');
    } catch(e) {
      // something went wrong, hide the canvas container
      document.getElementById('tagCloudContainer').style.display = 'none';
    }

       if( ! $('#tagCloudCanvas').tagcanvas({
         textColour : null,
         outlineThickness : 1,
         maxSpeed : 0.03,
         depth : 0.6,
         zoom : 1.0,
         reverse : true,
         outlineMethod : 'none',
         shuffleTags : true,
         maxSpeed : 0.05,
         decel : 0.99,
         initial : [0.08,-0.03],
         textHeight : 26,
         outlineThickness : 2,
         outlineOffset: 3,
         wheelZoom : false
       })) {
         // TagCanvas failed to load
         $('#tagCloudContainer').hide();
       }
goat1000 commented 10 years ago

Try removing the $('#tagCloudContainer').hide(); line - it hides the DIV containing the canvas, and so it will hide the image too.

If it still doesn't work, try using a second DIV containing the image (initially hidden) then hide the canvas DIV when it fails and show the image DIV.