A CodePen by Jack Rugile. Canvas Bokeh Generation - Pretty heavy, and not exactly true to real photography, but it's a start.

index.html

<h1>Canvas Bokeh</h1>

script.js

var c = document.createElement('canvas'),
  ctx = c.getContext('2d'),
  rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);},
  cw = c.width = window.innerWidth,
	ch = c.height = window.innerHeight;	
	
function makeBokeh(){
	var count = Math.floor((cw * ch) / 800);
	while(count--){
			radius = rand(1,120),
			x = rand(0,cw),
			y = rand(0,ch),
			alpha = rand(5,30)/100,
			hue = rand(200, 360),
			lightness = rand(1, 30),
			saturation = rand(10, 50),
			shadowBlur = radius/2,
      lineWidth = radius/40,
			fillColor = 'hsla('+hue+','+saturation+'%,'+lightness+'%,'+alpha+')',
			strokeColor = 'hsla('+hue+','+saturation+'%,'+lightness+'%,'+alpha+')',
			shadowColor = 'hsla('+hue+','+saturation*2+'%,'+lightness*2+'%,'+alpha*2.5+')';
		    
    ctx.fillStyle = fillColor;
		ctx.shadowColor = shadowColor;
		ctx.shadowBlur = shadowBlur;
		ctx.strokeStyle = strokeColor;	
    ctx.lineWidth = lineWidth;
    
		ctx.beginPath();
		ctx.arc(x, y, radius, 0, Math.PI*2, false);
		ctx.closePath();
    ctx.fill();
    
    ctx.beginPath();
		ctx.arc(x, y, radius-lineWidth/2, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.stroke();
    
	}
}

ctx.globalCompositeOperation = 'lighter';
document.body.appendChild(c);
makeBokeh();

style.css

body {
  background: #000; 
}

canvas {
  display: block; 
}

h1 {
  background: rgba(0,0,0,.65);
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
  color: #fff;
  font: bold 26px/26px 'helvetica neue', helvetica, arial, sans-serif;
  height: 70px;
  left: 50%;
  line-height: 70px;
  margin: -36px 0 0 -121px;
  position: absolute;
  text-align: center;
  text-shadow: 0 -1px 0 #000;
  top: 50%;
  width: 240px;
}