Tag Cloud

Making tags appear as clouds.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Tag Clouds</title>
    </head>
    <body style="background: lightblue;">
        <h1>Tag clouds</h1>
        <form>
            <div style="margin: 1em; line-height: 1">
                <input type="checkbox" name="c" id="c1"/>
                <label for="c1" class="cloud"><span>This</span></label>
                <input type="checkbox" name="c" id="c2"/>
                <label for="c2" class="cloud"><span>is</span></label>
                <input type="checkbox" name="c" id="c3"/>
                <label for="c3" class="cloud"><span>a</span></label>
                <input type="checkbox" name="c" id="c4"/>
                <label for="c4" class="cloud"><span>Tag</span></label>
                <input type="checkbox" name="c" id="c5"/>
                <label for="c5" class="cloud"><span>Cloud.</span></label>
                <input type="checkbox" name="c" id="c6"/>
                <label for="c6" class="cloud"><span>So awesome!</span></label>
            </div>
        </form>
    </body>
</html>

CSS

label.cloud {
    position: relative;
}
label.cloud span {
    z-index: 15;
    position: relative;
    display: inline-block;
    padding: 1em 1.5em 0;
    margin: 0.5em 0;
}
label.cloud canvas.base,
label.cloud canvas.hover,
label.cloud canvas.checked {
    z-index: 10;
    position: absolute;
    left: 0;
    top: -1em;
}
/*label.cloud canvas.hover,
label.cloud canvas.checked {
    display: none;
}
label.cloud:hover canvas.base,
label.cloud.checked canvas.base {
    display: none;
}
label.cloud:hover canvas.hover {
    display: inline-block;
}
label.cloud.checked:hover canvas.hover,
label.cloud:hover canvas.checked {
    display: none;
}
label.cloud.checked:hover canvas.checked,
label.cloud.checked canvas.checked {
    display: inline-block;
}*/
label.cloud:hover {
    top: -2px;
}

JavaScript

$(function() {
    $("input:checkbox").click(function() {
        if($(this).is(':checked')) {
           //$(this).next('label').addClass('checked');
            var canvas = $(this).next('label').children('canvas').get(0);
            var ctx1 = canvas.getContext("2d");
            ctx1.translate(3,0);
            ctx1.shadowColor   = 'rgba(0, 0, 0, 0)';
            ctx1.fillStyle = "#ff0000";
            ctx1.fill();
        } else {
           //$(this).next('label').removeClass('checked');
           var canvas = $(this).next('label').children('canvas').get(0);
           var ctx1 = canvas.getContext("2d");
            ctx1.translate(3,0);
            ctx1.shadowColor   = 'rgba(0, 0, 0, 0)';
           ctx1.fillStyle = "#ffffff";
           ctx1.fill(); 
            
        }
    });
    $("input:checkbox").hide();
});
$(function() {
    var cloud = function(canvas1, canvas2, canvas3) {
        var circle = function(ctx, x, y, radius) {
            ctx.arc(x, y, radius, 0, Math.PI*2, false);
        };
        var cheight = canvas1.height-5;
        var cwidth = canvas1.width-6;
        var filldia = cheight/2;
        var fillradius = cheight/4;
    
        var ctx1 = canvas1.getContext("2d");
        //var ctx2 = canvas2.getContext("2d");
        //var ctx3 = canvas3.getContext("2d");
        ctx1.translate(3,0);
        //ctx2.translate(3,0);
        //ctx3.translate(3,0);
        ctx1.fillStyle = "#ffffff";
        //ctx2.fillStyle = "#eeeeee";
        //ctx3.fillStyle = "#dddddd";
        ctx1.shadowOffsetX = 0;
        ctx1.shadowOffsetY = 1;
        ctx1.shadowBlur    = 4;
        ctx1.shadowColor   = 'rgba(0, 0, 0, 0.3)';
        /*ctx2.shadowOffsetX = 0;
        ctx2.shadowOffsetY = 1;
        ctx2.shadowBlur    = 4;
        ctx2.shadowColor   = 'rgba(0, 0, 0, 0.3)';
        ctx3.shadowOffsetX = 0;
        ctx3.shadowOffsetY = 1;
        ctx3.shadowBlur    = 4;
        ctx3.shadowColor   = 'rgba(0, 0, 0, 0.3)';*/

        ctx1.beginPath();
       ...