HTML5 Canvas Animated Gradient BackgroundCreate a magical snow effect with your HTML5 canvas just in time for winter!
HTML5 Canvas Colorful Circles EffectUse this code to create an electric plasma effect using your HTML5 canvas.
HTML5 Canvas Constellation EffectThis code uses HTML5 canvas to create a fun firework animation.
HTML5 Canvas Snake GameUse this code to create a fun animated bubbles effect using your HTML5 canvas. The bubbles move up the screen, are transparent, and constantly moving.
HTML5 Canvas Animated Solar SystemThis code demonstrates how to use your canvas to create colorful animated tiles.
HTML5 Canvas Bouncing BallsUse this code to add a cool animated effect to your HTML5 canvas where dots appear to explode across the canvas.
HTML5 Canvas Floating HeartsUse this code to add different shadows to your canvas text. In canvas, there are 4 different shadow properties: offsetX, offsetY, shadowColor, and shadowBlur. Offsets X and Y are just the values at which the shadow should be separated from the actual text. shadowColor refers to the color of the shadow -- this one needs to be set because the default shadowColor value is transparent, meaning the a shadow won't be visible unless you set this. shadowBlur takes a numerical value and smoothes the edges of the shadow to make it more aesthetically pleasing.
HTML5 Canvas Animated HeartExperiment with this bursting particle effect code to enhance your canvas animation skills.
HTML5 Canvas Rotating Switching CrossesAdding gradients and shadows to text within the HTML5 canvas is an easy way to create some texture in your designs. Customize the colors and the shadow blur and make it your own!
HTML5 Canvas Circular Loading AnimationCreating a simple paint application using HTML5 Canvas is easy and fun. Once you feel comfortable with this code, be sure to play around with different "paint brush" colors, shapes, and sizes.