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 Animated Bubbles
Description
Use this code to create a fun animated bubbles effect using your HTML5 canvas. The bubbles move up the screen, are transparent, and constantly moving.
Animated Bubbles
Demo