HTML5 Canvas 3D WebGL (TM) js Library
 

taccGL Canvas Operation

taccgl™ uses the HTML canvas element for creating animations. Canvas is an element newly introduced in HTML 5, which allows scripts to efficienaly draw images and animations on the canvas. It comes with a lot of new scripting functions for drawing in 2D and 3D (WebGL™) mode. You do not need to know how to use HTML canvas for using taccgl™, since the canvas functions are hidden by taccgl™.

taccgl™ draws all the amination on an full-window sized canvas. So when you see an element moving with taccgl™, it is actually not the element itself that is moving, but an image of the element drawn on the canvas, while the original HTML element is hidden during the animation. At the first glance this is not important because the end result looks the same (at least it is supposed to, see Restrictions). However, as a javaScript programmer you need to keep in mind, that (unlike other approaches) taccgl does not modifly the DOM (except for hiding elements) and so the HTML page displayed stays the same (or behaves as you programmed it) while taccgl™ just plays an animation on top of the HTML page.

Often, this is the desired behaviour. So if you want to use an animation, to attract attention, to illustrate something, or just to make your page look nicer or more impressive, you do not really want to change the DOM but just play the animation. If you want to make an HTML element visible or to hide it, this can be achieved telling taccgl™ to hide/show the original element after the animation (note that it is hidden during the animation anyway).

If you on the other hand want to modify the DOM, e.g. to display some new data to the user, you need to do so with other means, however, you might want to use taccgl™ to play an animation to make the DOM change appear smoothly.

While an animation is playing, there is a transparent canvas on top of all the HTML elements showing the animation. HTML elements not taking part in the animation are displayed as usual and appear through the transparent canvas, while taccgl™ draws the animated elements on the canvas and hides the original ones. This means that mouse interactions during an animation take place with the canvas and not the real HTML element, which effectively means that mouse clicks a blocked during animations. There also is a Background Mode to use a canvas in the background that does not have this behaviour.

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:Coordinate System
Previous Page: Manual Structure
Please Add a Comment or Question, click here!