Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Our new tutorial tells us how to create an animated 3D Sphere (through direct access to pixels on the canvas). The sphere itself moves around the canvas continuously. This example should work in most modern browsers (like Firefox, Chrome, Safari and even in IE).

During initialization, the script prepares two canvas objects and two contexts. Then, it loads our main background image, and draws it as our first context. Then it prepares a hash table of sphere transformations: aMap. And, in the end – it starts the timer, which updates the main scene. In this function (updateScene) we update the coordinates of our Sphere object, and draw the updated sphere at our second location.