Advanced CSS CSS Transitions Experimental Tutorial

Up until now we have only seen methods of the drawing context. If we want to apply colors to a shape, there are two important properties we can use: fillStyle and strokeStyle.

Canvas Graphics HTML HTML5 Intermediate Tutorial

Probably the biggest limitation is, that once a shape gets drawn, it stays that way. If we need to move it we have to redraw it and everything that was drawn before it. It takes a lot of time to redraw complex frames and the performance depends highly on the speed of the computer it's running on.

Canvas Graphics HTML HTML5 Intermediate Tutorial

We can not only draw new shapes behind existing shapes but we can also use it to mask off certain areas, clear sections from the canvas (not limited to rectangles like the clearRect() method does) and more.

Canvas Graphics HTML HTML5 Intermediate Tutorial

This sample program demonstrates a number of compositing operations. The output looks like this:

Canvas Example Graphics HTML HTML5 Tutorial

The following is a collection of tips to improve performance

Advanced Canvas Graphics HTML HTML5 Tutorial

The Channel Messaging API allows two separate scripts running in different browsing contexts attached to the same document (e.g., two IFrames, or the main document and an IFrame, or two documents via a SharedWorker) to communicate directly, passing messages between one another through two-way channels (or pipes) with a port at each end. In this article we'll explore the basics of using this technology.

API Channel messaging HTML5 MessageChannel MessagePort Tutorial

The Fullscreen API provides an easy way for web content to be presented using the user's entire screen. The API lets you easily direct the browser to make an element and its children, if any, occupy the fullscreen, eliminating all browser user interface and other applications from the screen for the duration.

API DOM Fullscreen API Intermediate JS Tutorial

The Notifications API lets a web page or app send notifications that are displayed outside the page at the system level; this lets web apps send information to a user even if the application is idle or in the background. This article looks at the basics of using this API in your own apps.

Advanced API DOM Guide Notifications Tutorial

A WebSocket server is a TCP application listening on any port of a server that follows a specific protocol, simple as that. The task of creating a custom server tends to scare people; however, it can be easy to implement a simple WebSocket server on your platform of choice.

Guide HTML5 NeedsContent NeedsExample Tutorial WebSocket WebSockets

Why a re-introduction? Because JavaScript is notorious for being the world's most misunderstood programming language. It is often derided as being a toy, but beneath its layer of deceptive simplicity, powerful language features await. JavaScript is now used by an incredible number of high-profile applications, showing that deeper knowledge of this technology is an important skill for any web or mobile developer.

CodingScripting Intermediate Intro JavaScript Learn Tutorial

Before we can start drawing, we need to talk about the canvas grid or coordinate space. Our HTML skeleton from the previous page had a canvas element 150 pixels wide and 150 pixels high. To the right, you see this canvas with the default grid overlayed. Normally 1 unit in the grid corresponds to 1 pixel on the canvas. The origin of this grid is positioned in the top left corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y). Later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it, but for now we'll stick to the default.

Canvas Graphics HTML HTML Canvas HTML5 Intermediate Tutorial

This tutorial walks you through using the asynchronous API of IndexedDB. If you are not familiar with IndexedDB, you should first read Basic Concepts About IndexedDB.

Advanced API Database Guide IndexedDB Storage storage Tutorial

The Web Speech API provides two distinct areas of functionality — speech recognition, and speech synthesis (also know as text to speech, or tts) — which open up interesting new possibilities for accessibility, and control mechanisms. This article provides a simple introduction to both areas, along with demos.

API Guide recognition speech synthesis Tutorial Using Web Speech API

API Canvas fullscreen Tutorial Virtual Reality VR WebVR

The Web Animations API lets us construct animations and control their playback with JavaScript. This article will start you off in the right direction with fun demos and tutorials featuring Alice in Wonderland.

Alice Animate animate Animations animations Beginner beginner CSS duration Guide JavaScript keyframes pause play reverse Timing Tutorial web animations api