User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 319

if (lastY > cheight) lastY = 0;
lastX += 1;
if (lastX > cwidth) lastX = 0;
invalidate(); // call invalidate to redraw the
canvas
}
window.onload = init;
Figure 7-13. Three frames from a basic animation engine that sweeps two lines across a canvas
To see this working, edit script.js in the canvas/js directory. Obviously, this
is just a simple example to show a bare-bones animation engine, but this structure could
easily be developed further to create more complex animation sequences.
Drag-and-drop operations
Drag-and-drop functionality as it appears in the HTML5 specification is actually an
old Microsoft addition, 72 which was added to Internet Explorer originally more than a
decade ago. Since then, the other browsers have caught up and implemented the same
functionality—except for Opera, which does not currently support this feature natively.
In the supporting browsers, drag-and-drop capability is available to all the elements
through the global draggable attribute, which has the possible values of true or
false . Most elements will be set to false by default, but there are a few exceptions.
The image element ( img ) has its draggable attribute set to true by default, as does
the anchor element ( a ), but only if it has its href attribute set. Also, although it doesn't
have attributes, plain text that has been selected by the user can be dragged by default.
Dragging operations will always have a start and an end, which usually corresponds
to something being picked up, moved, and dropped somewhere else. Quite a few events