CodePen

HTML

            
              <canvas id="c" width="500" height="300"></canvas>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              canvas { border: 1px solid #ccc }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var el = document.getElementById('c');
var ctx = el.getContext('2d');
var clientX, clientY, timeout;
var density = 40;

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// got this here:
// http://www.protonfish.com/random.shtml
function rnd_snd() {
	return (Math.random()*2-1)+(Math.random()*2-1)+(Math.random()*2-1);
}

function rnd(mean, stdev) {
	return Math.round(rnd_snd()*stdev+mean);
}

el.onmousedown = function(e) {
  ctx.lineJoin = ctx.lineCap = 'round';
  clientX = e.clientX;
  clientY = e.clientY;
  
  timeout = setTimeout(function draw() {
    for (var i = density; i--; ) {
      ctx.globalAlpha = Math.random();
      m = 0;
      s = 10;
      xd = rnd(m, s);
      yd = rnd(m, s);
      x = clientX + xd;
      y = clientY + yd;
      ctx.fillRect(
        x, y, getRandomInt(1,2),getRandomInt(1, 2));
    }
    if (!timeout) return;
    timeout = setTimeout(draw, 50);
  }, 50);
};
el.onmousemove = function(e) {
  clientX = e.clientX;
  clientY = e.clientY;
};
el.onmouseup = function() {
  clearTimeout(timeout);
};
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................