The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images. These tutorials describe how to implement the canvas element in your HTML pages.

Learning the basics of HTML5 canvas

Rob Hawkes explains how to use the canvas element, draw basic shapes and text, change the colour, erase the canvas and how to make it fill the browser window.

HTML 5 Canvas Deep Dive

Canvas is a 2D drawing API recently added to HTML and supported by most browsers (even Internet Explorer 9 beta). Canvas allows you to draw anything you want directly in the webbrowser without the use of plugins like Flash or Java. With a deceptively simple API, Canvas has the ability to revolutionize how we build web applications for all devices, not just desktops. This session is a three hour workshop that will deep dive into Canvas, starting with the basics and progressing into real world applications. Finally we will take a look at some experimental edges of Canvas, such as webcam and audio visualization.

A Developer’s Guide to HTML5 Canvas

Undoubtedly, the canvas element in HTML5 is the feature that most developers will want to use to develop truly rich web applications – without needing to install browser plug-ins like Adobe’s Flash player. Canvas was born at a time when client richness is at the forefront of developers’ minds. Modern browsers like Chrome, Firefox, and Internet Explorer 9 and 10 all support it. But what exactly is the canvas element in HTML5? How can you use it to create rich web applications?

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. In this article, I’ll demonstrate one possible solution.

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.

Learn HTML5 With This Simple Avoider Game Tutorial

In this tutorial (the first of a series), you’ll learn the basics of HTML5 game development with JavaScript and the canvas element. You don’t need to have any programming experience, or even any HTML experience (apart from this one article). Let’s get started!

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.

Creating an HTML5 Canvas Image Color Picker

New interesting tutorial – I will show you how you can create nice and easy Image color picker using HTML5. Main idea – to draw a picture on the canvas, add event handlers to mouse move, to mouse click (for picking colors).

Creating an HTML 5 canvas painting application

Making a web application that allows users to draw on a canvas requires several important steps: setting up your HTML document with a canvas context (a canvas element with an id), setting up your script to target that canvas context and draw inside it and adding the required mouse event handlers for user interaction and associated logic. Once the event handlers are in place, it’s then fairly simple to add any desired functionality.

Create a page flip effect with HTML5 canvas

For a long time, web developers leaned on plug-ins to bring truly immersive and rich interactive experiences to their users. HTML5 has begun to change all this by bringing some of the most crucial building blocks of these web augmentations to the open web.