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 Colorful Circles Effect

Description

Canvas can be used to create so many different types of animated effects. This tutorial shows you how to create a canvas full of circles that have changing colors and sizes. The circles cycle through different sizes and colors on their own, but they also respond to stimulus from the cursor. Adapted from a CodePen tutorial.

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">
<title>Canvas Colorful Circles</title>
<style type="text/css">
html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}
</style>

<body>
	
<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/4a746fd71304c110da2c6ef266783844.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