HTML5 has brought some exciting new advantages to the HTML coding world. Canvas allows you to render graphics powered by Javascript. So throw away that flash code and dive into Canvas. Here you will find the best tutorials and resources to learn Canvas and other HTML5 aspects.
Canvas Shape and Color EffectsThis HTML5 canvas effect (originally featured on CodePen) features different effects that experiment with animations, shapes, and colors using canvas.
HTML5 Canvas Colorful Wave EffectThis HTML5 Canvas tutorial shows you how to use canvas to create a cool, colorful wave-like effect. Originally posted on CodePen.
HTML5 Canvas Lighting, Color, and Texture EffectsThis canvas tutorial demonstrates how you can use canvas to play with color, texture, and lighting scenarios. Originally published on CodePen.
HTML5 Canvas Blooming Flowers EffectThis tutorial from CodePen shows you how to use HTML5 to create a cool, 70s inspired effect with animated blooming flowers.
HTML5 Canvas Interactive Text ParticlesThis HTML5 canvas tutorial demonstrates how to use particles to create the shape of text, and furthermore, how to make these particles interact, so that when your cursor moves over them, they explode and drift eventually out of the canvas frame. The particles are colorful and the interactive effect is very fun. This code snippet was originally posted on CodePen.
HTML5 Canvas Animated Tree EffectThis 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.
HTML5 Canvas Cloud EffectThis canvas tutorial, originally posted on CodePen demonstrates how to use canvas to create a cloud effect. The code snippet shows you how to make big, fluffy static clouds against a bright blue sky.
HTML5 Canvas Breakout GameThis tutorial shows you how to use HTML5 canvas to create a classic breakout or brickbreaker game (you know, the one where you use the ball to destroy the bricks at the top of the screen). This snippet originally appeared on CodePen.
HTML5 Canvas Triangle PatternThis code snippet demonstrates how to create a cool pattern of repeating triangles using HTML5 canvas. The triangle pattern has many different color themes, and one will be randomly selected on each load. This snippet originally appeared on CodePen.
HTML5 Canvas Drawing EffectsThis tutorial shows you how to use canvas to create over a dozen different types of drawing effects. The snippet gives you an option to choose what type of brush you'd like to draw with (choose from one of sixteen different and colorful options!), and it also allows you to clear the canvas as well. It almost mimics the paintbrush or airbrush effects on popular image editing software like Photoshop. Adapted from a CodePen tutorial.