Cacher is the code snippet organizer for pro developers

@import "compass/css3";

html, body {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZmIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNjY2MiPjwvcmVjdD4KPC9zdmc+");
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
  font-family: "Source Code Pro";
  &:hover {
    span {
      display: none; 
    }
  }
}

canvas {
  cursor: crosshair;
}

span {
  font-family: 'Source Code Pro';
  font-size: 30px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -220px;
  margin-left: -200px;
  margin-right: 50px;
}   

//Drawing with text. Skills section of digital resume

// Adapted from Generative Design book - http://www.generative-gestaltung.de - Original licence: http://www.apache.org/licenses/LICENSE-2.0

// Application variables
var position = {
    x: 0,
    y: window.innerHeight / 2
};
var counter = 0;
var minFontSize = 10;
var angleDistortion = 0;
var letters = "JavaScript  CSS  Agile  Ruby  Rails  Object Oriented Design  Rspec  Git  HTML5  CSS3  Sass Behavioral Driven Development   JavaScript  CSS  Agile  Ruby  Rails  Object Oriented Design  Rspec  Git  HTML5  CSS3  Sass Behavioral Driven Development  JavaScript  CSS  Agile  Ruby  Rails  Object Oriented Design  Rspec  Git  HTML5  CSS3  Sass Behavioral Driven Development  JavaScript  CSS  Agile  Ruby  Rails  Object Oriented Design  Rspec  Git  HTML5  CSS3  Sass Behavioral Driven Development  JavaScript  CSS  Agile  Ruby  Rails  Object Oriented Design  Rspec  Git  HTML5  CSS3  Sass Behavioral Driven Development  JavaScript  CSS  Agile  Ruby  Rails  Object Oriented Design  Rspec  Git  HTML5  CSS3  Sass Behavioral Driven Development  JavaScript  CSS  Agile  Ruby  Rails  Object Oriented Design  Rspec  Git  HTML5  CSS3  Sass Behavioral Driven Development  Behavioral Driven Development";

// Drawing variables
var canvas;
var context;
var mouse = {
    x: 0,
    y: 0,
    down: false
}

    function init() {
        canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        canvas.addEventListener('mousemove', mouseMove, false);
        canvas.addEventListener('mousedown', mouseDown, false);
        canvas.addEventListener('mouseup', mouseUp, false);
        canvas.addEventListener('mouseout', mouseUp, false);
        canvas.addEventListener('dblclick', doubleClick, false);

        window.onresize = function(event) {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
    }

    function mouseMove(event) {
        mouse.x = event.pageX;
        mouse.y = event.pageY;
        draw();
    }


    function draw() {
        if (mouse.down) {
            var d = distance(position, mouse);
            var fontSize = minFontSize + d / .8;
            var letter = letters[counter];
            var stepSize = textWidth(letter, fontSize);

            var gradient = context.createLinearGradient(0, 0, canvas.width, 0);
            var colors = "rgb(20, 200, " + (Math.floor(Math.random() * 30) * 10) + ")"

            gradient.addColorStop("0", colors);
            gradient.addColorStop("0.2", colors);


            if (d > stepSize) {
                var angle = Math.atan2(mouse.y - position.y, mouse.x - position.x);

                context.font = fontSize + "px 'Source Code Pro'";

                context.save();
                context.translate(position.x, position.y);
                context.rotate(angle);
                context.fillStyle = gradient;
                context.fillText(letter, 0, 0, 100)
                context.restore();

                counter++;
                if (counter > letters.length - 1) {
                    counter = 0;
                }

                position.x = position.x + Math.cos(angle) * stepSize;
                position.y = position.y + Math.sin(angle) * stepSize;

            }
        }
    }

    function distance(pt, pt2) {

        var xs = 0;
        var ys = 0;

        xs = pt2.x - pt.x;
        xs = xs * xs;

        ys = pt2.y - pt.y;
        ys = ys * ys;

        return Math.sqrt(xs + ys);
    }

    function mouseDown(event) {
        mouse.down = true;
        position.x = event.pageX;
        position.y = event.pageY;

        document.getElementById('info').style.display = 'none';
    }

    function mouseUp(event) {
        mouse.down = false;
    }

    function doubleClick(event) {
        canvas.width = canvas.width;
    }

    function textWidth(string, size) {
        context.font = size + "px 'Source Code Pro'";

        if (context.fillText) {
            return context.measureText(string).width;
        } else if (context.mozDrawText) {
            return context.mozMeasureText(string);
        }

    };

init();

<canvas id='canvas'></canvas>
<span id='info'>click and drag to find out what i can do...<span>
 
<!--  
  Drawing with text:
  
  -  Click and drag to draw.
  -  Double click to clear.

  by Caroline Artz @carolineartz
  Closely adapted from Tim Holman's (@twholman) port of java at http://www.generative-gestaltung.de
-->