Blog Design Development Mobile Inspiration CSS Javascript News Opinions Politics Menu

Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet

HTML5 Canvas Text Font, Size, and Style Tutorial

HTML5 Canvas Bokeh Effect

Description

This tutorial shows you how to use HTML5 canvas to create cool a bokeh effect, similar to the one captured when cameras take out-of-focus pictures of lights. This tutorial uses two canvases to achieve the desired effect. Find out more about the canvas bokeh effect here.

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">
<title>Canvas Bokeh Effect</title>
<style type="text/css">
body {
  background: #000;
  overflow: hidden;
}

canvas {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

#c1 {
  opacity: 0;
}

#c2 {
  background: #000;
}
</style>

<body>
	
<canvas id="c1"></canvas>
<canvas id="c2"></canvas>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	
<script>"use strict";var wprRemoveCPCSS=function wprRemoveCPCSS(){var elem;document.querySelector('link[data-rocket-async="style"][rel="preload"]')?setTimeout(wprRemoveCPCSS,200):(elem=document.getElementById("rocket-critical-css"))&&"remove"in elem&&elem.remove()};window.addEventListener?window.addEventListener("load",wprRemoveCPCSS):window.attachEvent&&window.attachEvent("onload",wprRemoveCPCSS);</script><script src="https://www.html5canvastutorials.com/wp-content/cache/min/1/6bc5b13f649a8416e05fa9ebd41bcf9a.js" data-minify="1"></script><noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT%20Sans%7CLato%3A400%2C700%2C400italic%2C700italic%7COswald%3A400%2C700&display=swap" /><link rel="stylesheet" href="https://www.html5canvastutorials.com/wp-content/cache/min/1/d94d61c3c9378c3a73090741906359ca.css" media="all" data-minify="1" /><link rel="stylesheet" href="/libraries/codeMirror/lib/codemirror.css"></noscript></body>

Demo