Javacript Advanced Programming-canvas Drawing

1. Canvas Drawing

The <canvas> element of HTML5 provides a set of JavaScript APIs that allow us to dynamically create graphs and images. The graph is created in a specific context, and there are two types of context objects currently available.

The first is the 2D context, which can perform the original drawing operation,

L Set Fill, stroke color, and mode

L Draw a rectangle

L Draw Path

L Draw Text

L Create gradients and patterns

The second type is the 3D context, the WEBGL context.

• Vertex and fragment shaders written using GLSL

Supports typed arrays, that is, the ability to limit the data in an array to a specific numeric type

L Create and manipulate textures

The newer versions of mainstream browsers support <canvas> tags, but WEBGL is only supported by Firefox 4+ and Chrome.

Javacript Advanced Programming-canvas Drawing