Canvas element

A canvas element ( from the English canvas for "canvas" or " painting" ) is a - in the language HTML - with height and width information recorded area, can be drawn in by JavaScript. Originally developed by Apple as part of WebKit, it was later standardized by the WHATWG working group as part of the markup language HTML5.


In addition to normal line and rectangle drawing functions allows Canvas inter alia, the drawing:

  • Arcs
  • Bezier curves (quadratic and cubic)
  • Gradients
  • Graphics (formats: PNG, GIF, JPEG), which scales can be positioned and trimmed
  • Transparency (with multiple gradations )
  • Text

Objects and object groups can be moved, rotated and scaled.

As with OpenGL and DirectX also can be stored in a stack objects, which allows the specific manipulation of groups of objects. Animations are possible through the use of javascript time functions.

The output of vector graphics is not supported.


Canvas is natively ( ie without plug-ins) supported by current versions of Internet Explorer, Firefox, Opera, Safari and Chrome.

Old versions of Internet Explorer, which nowadays are still widely used, do not support canvas, because they were published before the canvas element has been standardized.

Here is a detailed overview of the Canvas Supports the most popular browsers (including the last 4 posts):

However, the old versions of Internet Explorer can use plugins, which are provided by Mozilla and Google are available to the canvas function to be expanded.

Pictures of Canvas element