HTML 5’s Almost Forgotten Canvas Element


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.

Recently Published

»

Why is Link Building So Important? Read this to understand

Getting a high ranking on search engine results is important to the ...

»

Productivity Tips for Web Developers for Efficient Time Management

The world is full of distractions. Whether you are a work-from-home, ...

»

The Importance of a Good Domain Name

The right domain name can genuinely make or break a business – ...

»

Cloud Strategy of Oracle: Working or Not?

Though Oracle considered cloud strategy as gibberish long before, it ...

»

Some Excellent SEO Tools for Boosting SEO Rankings like Never Before

You could be having a really great-looking website and the niftiest ...

»

How to Promote Your Business by Collecting Instagram Followers – Part 2

Promoting business is not an easy task these days with so many ...

»

Using Instagram to Optimize Your Business – Unfolding the Tricks – Part 1

Instagram is one of the most popular social networking communities ...

»

6 Mobile UX Design Techniques that work

In software development, be it a mobile app or a website, creating ...

»

Importance of website design in online branding

“A brand for a company is like a reputation for a person. You earn ...