Results 1 - 20 of 93

Advanced animations

We are going to use a ball for our animation studies, so let's first draw that ball onto the canvas. The following code will set us up.
Canvas Graphics Tutorial

Drawing text

The canvas rendering context provides two methods to render text:
Canvas Graphics Intermediate Tutorial


There are a variety of demos and further explanations about canvas on these sites:
Canvas Graphics Tutorial

Hit regions and accessibility

The content inside the <canvas> ... </canvas> tags can be used as a fallback for browsers which don't support canvas rendering. It's also very useful for assistive technology users (like screen readers) which can read and interpret the sub DOM in it. A good example at demonstrates how this can be done:
Canvas Graphics Tutorial

Pixel manipulation with canvas

The ImageData object represents the underlying pixel data of an area of a canvas object. It contains the following read-only attributes:
Canvas Graphics Intermediate Tutorial


Support for WebGL is present in Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ and Internet Explorer 11+; however, the user's device must also have hardware that supports these features.
Advanced Graphics Media WebGL

Basic usage of canvas

At first sight a <canvas> looks like the <img> element, with the only clear difference being that it doesn't have the src and alt attributes. Indeed, the <canvas> element has only two attributes, width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size: if the CSS sizing doesn't respect the ratio of the initial canvas, it will appear distorted.
Canvas Graphics HTML Intermediate Tutorial

Using images

Importing images into a canvas is basically a two step process:
Advanced Canvas Graphics HTML Tutorial

Applying styles and colors

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

Basic animations

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

Compositing and clipping

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

Compositing example

This sample program demonstrates a number of compositing operations. The output looks like this:
Canvas Example Graphics HTML HTML5 Tutorial

Optimizing canvas

The following is a collection of tips to improve performance
Advanced Canvas Graphics HTML HTML5 Tutorial


Before we look at the transformation methods, let's look at two other methods which are indispensable once you start generating ever more complex drawings.
Canvas Graphics Guide HTML HTML5 Intermediate Web


To get an object of this interface, call getContext() on a <canvas> element, supplying "2d" as the argument:
API Canvas CanvasRenderingContext2D Games Graphics Reference

WebGL model view projection

This article explores how to take data within a WebGL project, and project it into the proper spaces to display it on the screen. It assumes a knowledge of basic matrix math using translation, scale, and rotation matrices. It explains the three core matrices that are typically used to represent a 3D object: the model, view and projection matrices.
Graphics Guide Model projection View WebGL


The WebGLRenderingContext.createShader() method of the WebGL API creates a WebGLShader that can then be configured further using WebGLRenderingContext.shaderSource() and WebGLRenderingContext.compileShader().
API Graphics Method Reference Shader WebGL