(function($){

  window.gen = function(){

    var text = $('text').value;

    var canvas = document.createElement('canvas');

    var width = text.length * 30;

    var height = 40;

    canvas.setAttribute('width', width);

    canvas.setAttribute('height', height);

    //canvas.style.backgroundColor = '#eee';

    //document.body.appendChild(canvas);

    var ctx = canvas.getContext('2d');

    ctx.font = "30px Arial";

    ctx.textAlign = 'left';

    ctx.fillStyle = "#f00"; 

    ctx.fillText(text, 0, 30);

    var data = ctx.getImageData(0,0, width, height);

    var css = [];

    for(var x = 0; x < width; x++)

       for(var y = 0; y < height; y++){

         var idx = (x + y * width) * 4;

         var r = data.data[idx + 0];

         var g = data.data[idx + 1];

         var b = data.data[idx + 2];

         var a = data.data[idx + 3];

         if(a > 127){

              css.push(x + 'px ' + y + 'px 0 1px rgba(' + r + ',' + g + ',' + b + ',' + a + ')');

         }

       }

    var show = $('show');

    $('css').value = 'div {\n  box-shadow:\n    ' + css.join(',\n    ') + '\n}';

    show.style.boxShadow = css.join(',');

  };

})(document.getElementById.bind(document));