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 Waterfall Effect

Description

Adapted from this CodePen tutorial, this code shows you how to use HTML5 canvas to create a beautiful animated waterfall.

<!DOCTYPE HTML>
<html>

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

canvas {
  display: block;
  margin: 0 auto;
}
</style>

<body>
	
<canvas id="waterfall"></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/31a8866395f59c4547eb467150eb867d.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/53177405dd11d11274238888a830f07b.css" media="all" data-minify="1" /><link rel="stylesheet" href="/libraries/codeMirror/lib/codemirror.css"></noscript></body>

Demo