The HTML5 Canvas provides a powerful way to render graphics, charts, and other types of visual data without relying on plugins such as Flash or Silverlight. So here are 14 HTML5 tutorials to help you implement canvas in your web projects.

Safari HTML5 Canvas Guide

Explains how to use the HTML5 <canvas> element for graphics, animations, and games.

The Complete Guide to Building HTML5 Games with Canvas and SVG

The first thing you need to understand before building your first HTML5 game is how to draw nice objects on the screen. There are two ways to do that and to better understand their differences, you should start by reading this article from Patrick Dengler (member of the SVG W3C Working Group): Thoughts on when to use Canvas and SVG.

How to Make Sprite Animations with HTML5 Canvas

Ajax and moving dom elements around made for some fun, but limited in what kind of experience you could create. For game developers, things are changing, and quickly. HTML5 is introducing a bunch of new options for game development purely in the browser, and the browser vendors are competing hard to be the best platform for the new standards.

Create a Drawing App with HTML5 Canvas and JavaScript

This tutorial will take you step by step through the development of a simple web drawing application using HTML5 canvas and its partner JavaScript. The aim of this article is to explore the process of creating a simple app along the way learn: How to draw dynamically on HTML5 canvas, The future possiblities of HTML5 canvas, The current browser compatibility of HTML5 canvas.

Bring Your Charts to Life with HTML5 Canvas and JavaScript

The HTML5 Canvas API is a set of client-side functions, which gives developers the ability to dynamically generate and manipulate graphics directly in the browser, without resorting to server-side libraries, Flash, or other plugins. The Canvas API gives you a fine level of control over the individual pixels on your page. It is like a blank slate on which we use JavaScript to draw and animate objects.

Blowing up HTML5 video and mapping it into 3D space

I’ve been doing a bit of experimenting with the Canvas and Video tags in HTML5 lately, and found some cool features hiding in plain sight. One of those is the Canvas.drawImage() api call. Here is the description on the draft site. The api lets you take the contents of specific HTML elements and draw them into a canvas, and the 3rd element in that list is just begging to be abused. Copying video into a canvas element means opening up the ability to manipulate or process video frames at runtime. Two concepts instantly came to mind that seemed like fun to try and figure out, here they are below.

Interactive Typography Effects with HTML5

With HTML5 gaining popularity, this tutorial outlines what is really just the tip of the iceberg that is interactive design. In this tutorial I will go over the development of dynamic, and generative banners to give your website that little extra wow!

HTML5 Canvas Cheat Sheet

The information is pretty much just a copy of what is found in the WHATWG specs, just condensed and hopefully a bit easier to read. There are virtually no explanations, however, and no examples other than some graphics for compositing values and a few other things (the appearance of which is very much inspired by those found in Mozilla’s examples). So, it’s basically just a listing of the attributes and methods of the canvas element and the 2d drawing context.

Improving HTML5 Canvas Performance

HTML5 canvas, which started as an experiment from Apple, is the most widely supported standard for 2D immediate mode graphics on the web. Many developers now rely on it for a wide variety of multimedia projects, visualizations, and games. However, as the applications we build increase in complexity, developers inadvertently hit the performance wall.

An HTML5 Slideshow w/ Canvas & jQuery

You’ve probably heard a lot about the new HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it, listen for events and integrate it deeply into our layouts.

video + canvas = magic

You’ve already learned about the video and canvas elements, but did you know that they were designed to be used together? In fact, the two elements are absolutely wondrous when you combine them!

Optimize Images With HTML5 Canvas

Images have always been the heaviest component of websites. Even if high-speed Internet access gets cheaper and more widely available, websites will get heavier more quickly. If you really care about your visitors, then spend some time deciding between good-quality images that are bigger in size and poorer-quality images that download more quickly. And keep in mind that modern Web browsers have enough power to enhance images right on the user’s computer.

HTML5 Video Face Detection with Canvas and Javascript

This morning I saw this link on youtube which was a little mashup of some HTML5 technologies. I thought it would be funny if I could do the same, but with goofy pair of glasses. I’ve also been itching to put the CCV JavaScript Face Detection library to use. This library shows a few examples on static images, but after a quick look at the code, it shows that the underlying element to the script is a canvas element. So instead of running it on a single image, I am running it on a feed of frames coming from an HTML5 video element.

Matrix Effect Using HTML5 and Javascript

When each time the Matrix function is called,Canvas fillStyle will draw the background on the screen.Because of this you can see text has different colors at different places on canvas.Some text will have green color without transparent background color. This is because there will be a new layer drawn on the screen each time the Matrix is called