Three of the most talked about elements in HTML 5 are the audio, video, and canvas elements. Much has been written about the audio and video elements, since they are so easily implemented into a web document. However, the canvas element hasn’t experienced the same notoriety as its two counterparts. To correct this oversight, this article discusses the basic information that you need to know in order to use the element. As always when creating new content, make sure not to copy others work, creating the possibility to have a patent lawsuit on your hands. It had happened many times before.
The Canvas Element
Thecanvas element has only one primary function, and that function is to provide a drawing surface for the Canvas Drawing API’s functions, which are also a part of the HTML 5 specification. When the canvas element is used without any default attributes, the element’s default behavior produces a drawing surface dimension of 300 pixels wide and 150 pixels high. To define a drawing surface dimension other than the default, web designers need to define the element’s width and height attribute. Another attribute that may also be defined is the ID attribute. Defining the ID attribute allows for each canvas element in the document to be styled independently using CSS. In addition, the ID attribute also serves another very useful function, which is the subject of the next section.
JavaScript
By itself, the canvas element adds nothing to the document. However, the value of the element becomes apparent when used with the scripting language, JavaScript. For any type of drawing to take place in the canvas element’s defined surface, JavaScript must perform this drawing, which it does by using functions and properties that are specifically designed for drawing. It is also worth noting that, unlike other HTML elements, the canvas element must use a secondary source, JavaScript, for it to be of any value in the HTML document.
The Drawing Context
As previously mentioned, the canvas element only provides a drawing platform for the drawing API. The drawing itself takes place on an object called a drawing context. This object is obtained by using the JavaScript’s getContext method. The word context, in this context, refers to the type of rendering that is allowed to take place. At present, the only object context that is allowed is the 2D context. Future implementations of the canvas element may allow 3D context to take place, such as with OpenGL ES.
To acquire the context of a particular canvas element, the element must call the getContext method. For example, a canvas with an ID of foo can be called using document.getElementByID(foo).getContext(2D) function call. The getContext method must also include the ’2D’ argument in the function. Furthermore, the return value of this function call can be stored in a variable. This variable can be used to call the other functions used with the drawing API. For instance, a variable with the name of bar can be used to call the fillStyle or fillRect function. The implementation of this example is shown below.
1 2 |
var bar = document.getElementByID(foo).getContext (2D); bar.fillRect(10,10,100,100); |
It should be apparent by now that to comfortably be able to use the canvas element, web developers need to have more than a passing familiarity with JavaScript. And since the canvas object is based upon using a coordinate space, they also need to be comfortable using X and Y coordinates. Plus, since manipulation of the drawing elements requires that developers know more than just how to add and subtract, they also need to be comfortable using some basic algebra. Yes, I went there. Sorry.
Types of Drawings
JavaScript comes with many types of drawing functions that can be used with the canvas element. To do these functions justice, each function would need an article devoted to it. However, to give you a taste of what the functions have to offer, the following lists the types of drawing the functions perform, along with the functions that perform the drawing.
- Rectangles: fillRect(), strokeRect(), clearRect()
- Paths: beginPath(),closePath(), stroke(), fill()
- Arcs: arc()
- Bezier curves: quadraticCurveTo(), bezierCurveTo()
- Images: drawImage()
- Gradients: createLinearGradient(), createRadialGradient()
To recap, the basic information that you need to know when it comes to using the canvas element is that, by itself, the canvas element adds no functionality to a web document. In addition, in order to draw within the element’s defined space, web developers need to use JavaScript functions. As long as they keep this in mind, learning how to use the element should be much simpler.