HTML5 Drawing with the Canvas Element

The HTML5 Canvas element is a popular one, used to display graphics. The element itself is created very simply in HTML5, like this:
The Canvas element can draw lines, arcs, complex shapes, images, text, and more.

Technically speaking, the Canvas element is very simple in HTML5. Here’s the specification:

• Elements:<canvas>
• Start tag required: Yes
• End tag required: Yes
• Required attributes: Height, width
• Supported browsers: Chrome, Firefox, Opera, Safari

The real story takes place in JavaScript with this element, and it will let us draw in the Canvas element example that we’ll develop in this post

Canvas Example

Casting Shadows

The Canvas element even lets you add shadows to your graphics with these attributes:

• attribute float shadowBlur; // (default 0)
• attribute DOMString shadowColor; // (default transparent black)
• attribute float shadowOffsetX; // (default 0)
• attribute float shadowOffsetY; // (default 0)

Drawing Rectangles

Here are the functions you use for rectangles:

• clearRect(float x, float y, float w, float h);
• fillRect(float x, float y, float w, float h);
• strokeRect(float x, float y, float w, float h);

Drawing Complex Shapes

With the Canvas element, you can draw arcs, Bezier curves, and more using these functions:

• arc(float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise);
• arcTo(float x1, float y1, float x2, float y2, float radius);
• beginPath();
• bezierCurveTo(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y);
• clip();
• closePath();
• fill();
• lineTo(float x, float y);
• moveTo(float x, float y);
• quadraticCurveTo(float cpx, float cpy, float x, float y);
• rect(float x, float y, float w, float h);
• stroke();
• boolean isPointInPath(float x, float y);

Drawing Some Text

You can also write text in a Canvas using these attributes and functions:

• attribute DOMString font; // (default 10px sans-serif)
• attribute DOMString textAlign; // “start”, “end”, “left”, “right”, “center” (default: “start”)
• attribute DOMString textBaseline; // “top”, “hanging”, “middle”, “alphabetic”, “ideographic”, “bottom” (default: “alphabetic”)
• fillText(DOMString text, float x, float y, optional float maxWidth);
• TextMetrics measureText(DOMString text);
• strokeText(DOMString text, float x, float y, optional float maxWidth);

Drawing Images

You can draw images with these functions:

• drawImage(HTMLImageElement image, float dx, float dy, optional float dw, float dh);
• drawImage(HTMLImageElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh);
• drawImage(HTMLCanvasElement image, float dx, float dy, optional float dw, float dh);
• drawImage(HTMLCanvasElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh);
• drawImage(HTMLVideoElement image, float dx, float dy, optional float dw, float dh);
• drawImage(HTMLVideoElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh);

Using Transformations

You can rotate, resize (scale), or move (translate) graphics with these functions:

• rotate(float angle);
• scale(float x, float y);
• translate(float x, float y);

That’s the overview of the Canvas