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 Animated Tree Effect

Description

This HTML5 canvas tutorial originally published on CodePen demonstrates how to use canvas to create an animation of a growing tree, complete with branches and leaves. The code snippet features animated growing trees of all different shapes and sizes.

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">
<title>Canvas Animated Tree</title>
<style type="text/css">
* {
  margin: 0; padding: 0;
}
#canvas {
  display: block;
}

</style>

<body>
	
<canvas id="canvas"></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/219dca68a2695a7f2a8fd97347da57f5.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