HTML canvas

By Martin McBride, 2017-04-09
Tags: html canvas
Categories: graphics html canvas

HTML5 introduced a new HTML element called a canvas. A canvas is placed on the page in a similar way to any other element such as an image or a div element.

However, the unique feature of the canvas is that you can use Javascript code to draw on it. The canvas has a comprehensive set of drawing commands including:

  • Simple shapes such as lines, rectangles and circles.
  • Complex shapes created from lines, arcs and curves.
  • Various line and fill styles for drawing shapes including gradients, dashes and patterns.
  • Positioning text and images.
  • Tranparency, shadows and clipping.

You can also interact with the mouse to create dynamic graphics, for example selecting, dragging or drawing on the canvas.

Animation is also possible, using standard JavaScript animation support (requestAniFrame).

There are also numerous libraries built on top of the canvas to provide scene based animation, more complex mouse interactions, 3D drawing, tweening and games.

Prequisites

This tutorial assumes you understand basic HTML and a bit of Javascript (although if you have programmed in other languages you will probably be able to muddle through).

See also

Sign up to the Creative Coding Newletter

Join my newsletter to receive occasional emails when new content is added, using the form below:

Popular tags

555 timer abstract data type abstraction addition algorithm and gate array ascii ascii85 base32 base64 battery binary binary encoding binary search bit block cipher block padding byte canvas colour coming soon computer music condition cryptographic attacks cryptography decomposition decryption deduplication dictionary attack encryption file server flash memory hard drive hashing hexadecimal hmac html image insertion sort ip address key derivation lamp linear search list mac mac address mesh network message authentication code music nand gate network storage none nor gate not gate op-amp or gate pixel private key python quantisation queue raid ram relational operator resources rgb rom search sort sound synthesis ssd star network supercollider svg switch symmetric encryption truth table turtle graphics yenc