The Canvas Element - Html programming crash course (2015)

Html programming crash course (2015)

Chapter 2: The Canvas Element

In this chapter, you will learn about the canvas element:

• The Canvas API

• Getting started with the Canvas element

HTML5’s Canvas element is extremely popular and is utilized to illustrate graphics. It can be created easily in HTML5 in the following way:

<canvas height-”yyy” width=xxx”>

</canvas>

The above code is all that is needed to create the Canvas element. The question that now comes to mind: how do you draw graphics within this canvas? The answer is: by using JavaScript, as we will see in this chapter.

The Canvas element is capable of drawing lines, arcs, images, complex shapes, text, and much more.

The Specifications

Here are the specifications of this element:

Element: <canvas>

Start Tag Required: Yes

End Tag Required: Yes

Necessary Attributes: Height & Width

Supporting Browsers: Firefox, Chrome, Safari, Opera

Due to the fact that JavaScript is necessary in order for this element to work, let us look at an overview of that is already available at our disposal before we jump into the details.

The Canvas API

A special application programming interface (API) has been created by W3C for this new canvas element. It specifies the names of all built-in functions and how they can be used.

You can get the Canvas API at the following link: http://dev.w3.org/html5/canvas-api/canvas-2d-api.html.

However, to make it easy for you to assimilate useful data, we will list the most important functions below.

In the W3C API specifications, the attributes of the element as well as the supported functions of JavaScript are available. Therefore, you have to set some aspects of the element with the attributes before you perform a drawing operation.

Look at the following example where the drawing style has been set with the fillStyle attribute, followed by the actual drawing of a filled rectangle with fillRect function.

canvas1.fillStyle =xxxx

canvas1.fillRect(xx, xx, xx, xx;

Each and every item in the API comes prefixed with its own types; for instance, float for floating point number.

Some of the representative types that you will see in the specifications by W3C are as follows:

any For attributes – This implies that an attribute can be of any kind.

DOMStrings (Meaning Document Object Model String) – Just a quoted text string, for our purposes.

float – Floating point number

Let us now look at what the Canvas API enlists for functions and attributes.

Styling

Two attributes are used for setting up the drawing style, regardless of whether the drawing actions are supposed to fill the figure or not:

▪ attribute any fillStyle; // [default is black]

▪ attribute any strokeStyle; // [default is black]

Setting Up Line Styles

The following JavaScript attribute can be used to set the line styles:

▪ attribute DOMString lineCap; // “butt”, “round”, “square” (default “butt”)

▪ attribute DOMString lineJoin; // “miter”, “round”, “bevel”*(default “miter”)

▪ attribute float lineWidth; // (default 1)

▪ attribute float miterLimit; // (default 10)

Casting Shadows

The Canvas Element is capable of adding shadows to graphics with the following attributes:

▪ attribute float shadowBlur; // (default 0)

▪ attribute DOMString shadowColor; // (default transparent black)

▪ attribute float shadowOffsetX; // (default 0)

▪ attribute float shadowOffsetY; // (default 0)

Drawing Rectangles

The following functions can be used 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

The Canvas element allows you to draw Bezier curves, arcs, and many more complex shapes with the following 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 Text

Text can also be written within a Canvas by utilizing the following 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

Images can be drawn by the following 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 easily rotate, scale, or translate graphics through the following functions:

▪ rotate(float angle);

▪ scale(float x, float y);

▪ translate(float x, float y);

This was a general overview of the Canvas API. For more details, you can refer to the link provided above.

Getting Started With Canvas

It is now time to get started with the Canvas element and learn how you can create one. To get started, follow the step by step guidelines given below:

1. Using a text editor, create a canvas.html file.

2. Enter the code given below to create a canvas element and to set-up the JavaScript. Note that we will use JavaScript in a function that we have named loader, which runs right after the Canvas element loads completely.

<!DOCTYPE html>

<html>

<head>

<title>

Canvas Example

</title>

<script type=”text/javascript”>

function loader()

{

.

.

.

</script>

</head>

<body onload=”loader()”>

<h1>Canvas Example</h1>

<canvas id=”canvas” width=”600”

height=”500”>

</canvas>

</body>

</html>

3. Add JavaScript given below to create an object that corresponds to the Canvas. This object will be used to access the Canvas element.

<!DOCTYPE html>

<html>

<head>

<title>

Canvas Example

</title>

<script type=”text/javascript”>

function loader()

{

var canvas = document.getElementById

(‘canvas’);

var canvas1 = canvas.getContext(‘2d’); .

.

.

</script>

</head>

<body onload=”loader()”>

<h1>Canvas Example</h1>

<canvas id=”canvas” width=”600”

height=”500”>

</canvas>

</body>

</html>

4. Save the canvas.html file. Ensure that this code has been saved in text format. If you are using WordPad, the default format is RTF which does not work with web browsers.

Once you have created a Canvas and implemented the associated JavaScript, you can use the appropriate functions for drawing rectangles, complex shapes, images, and many other things.

Summary

The Canvas element is capable of drawing lines, arcs, images, complex shapes, text, and much more.

A special application programming interface (API) has been created by W3C for this new canvas element. It specifies the names of all built-in functions and how they can be used.

Two attributes are used for setting up the drawing style, regardless of whether the drawing actions are supposed to fill the figure or not.