Blog
Design
Development
Mobile
Inspiration
CSS
Javascript
News
Opinions
Politics
Menu
HTML5 Canvas
Canvas Element
Lines
Line
Line Width
Line Color
Line Cap
Curves
Arc
Quadratic Curve
Bezier Curve
Paths
Path
Line Join
Rounded Corners
Shapes
Custom Shape
Rectangle
Circle
Semicircle
Fill Styles
Color Fill
Linear Gradient
Radial Gradient
Pattern
Images
Draw Image
Image Size
Image Crop
Image Loader
Text
Font, Size & Style
Text Color
Text Stroke
Text Align
Text Baseline
Text Metrics
Text Wrap
Transformations
Translate
Scale
Rotate
Custom Transform
Shear
Mirror
Reset Transform
State Stack
Oval
Composites
Shadows
Global Alpha
Clipping Region
Operations
Image Data & URLs
Image Data
Invert Colors
Grayscale
Get Data URL
Load Data URL
Save Drawing
Animation
Clear Canvas
Animation Frames
Linear Motion
Acceleration
Oscillation
Start and Stop
Mouse Detection
Mouse Coordinates
Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial
HTML5 Canvas Colorful Wave Effect
Description
This HTML5 Canvas tutorial shows you how to use canvas to create a cool, colorful wave-like effect. Originally posted on
CodePen
.
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Canvas Lighting, Color, and Texture Effect</title> <style type="text/css"> canvas { display: block; } </style> <body> <canvas id="c"></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/f13a986ae0650716cd76544415d3f23e.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
Blog
Design
Development
Mobile
Inspiration
CSS
Javascript
News
Opinions
Politics
Menu
Blog
Design
Development
Mobile
Inspiration
CSS
Javascript
News
Opinions
Politics
Menu
