We Keep Coding

3D cubes draggable to grid

I'm working on a project for school in HTML5 en CSS3.
The goal of the project is to teach young children how to calculate simple equations.
The first step towards learning this is teaching them to recognize numbers in different shapes.
A first exercise would be:
showing a random number and letting the child select a 3D cube and dragging it inside of a grid.
The number of cubes in the grid should correspond ofcourse with the given number.
Example given below:
I have no idea where to start. I know about a canvas in HTML5 but I'm not really familiar with it.
How can I snap the cubes into position when they come close?
How do I even draw a 3D cube in HTML5?
How can I check how many cubes were drawn on screen?
Can I draw something more pleasing for the children to look at than cubes, but still have a 3D effect?
Above all will it be capable of running on a iPad?
A dedicated App is out of the question as it should also be able to run on a desktop.
Hoping some of you might have a good solution.
Thanks

Only way to make genuin 3D cube that will work on ios browser is css3
You can put this cube(graphic representation) in to the present element that will represent its logically and use standard browser ways to manage drag and drop Usefully library and since this is DOM based implementation it can be styled with css. You can add color transition, animation delays or even deformation with the css3 transition it will have much better performance than js animations. Also it's easier to implement.
Here(video, images) is really cool animation guidance from Walt Disney Studios to help you make it visually appealing.

Drawing a model from different viewpoints on HTML5 <canvas>

Well this is for a project I chose to do for my computer graphics class - drawing a grand piano that can be viewed from different angles.
I haven't yet begun the work, and I just completed lynda.com course on HTML5:Graphics and Animation with Canvas. I can see how one could make a cube, or a ball, those sorts of simple figures. But I don't know how I should proceed on my project. Defining each small surface one by one, sure will be very tedious. Should I learn some more? WebGL or something else? Or is the 'tedious' way an 'okay' way? What would you suggest?

"The different angles" implies that you want to model and render a three dimensional object.
Here is one recipe to success:
Design your model (grand piano) in any open source and free modelling application, like Blender
Then, learn basics of Three.js or similar WebGL framework which simplifies the complex process of rendering a 3D scene
Export your model from Blender and import it to your Three.js JavaScript.
It is possible to render objects to <canvas> on Three.js without WebGL, but using WebGL backend simplies the process a lot and I highly recommend sticking with WebGL.
Here are is one of Three.js examples showing some modeled cars from different angles (cameras).
HTML5 Canvas API is mostly useful for 2D graphics and does not suit for your purpose very well, as you have noticed with its limitations.

Use WebGL, Three.js aims to be very accessible. www.udacity.com have a course on 3d graphics that uses Three.js that is very good for beginning.
Real-time 3D graphics is basically about creating a 2d image that re-creates that effect of a 3d perspective and can be updated in real-time.
Going about this in a brute force way won't teach you anything about how this effect is achieved.

Which js library to use for creating not complicated animation with html5 canvas?

I want to write some animation with html5 canvas element. I found that there are some js libraries that help to leverage canvas functionality. For example KineticJS, FabricJS. But I don't know which library to use.
What is pros and cons when using this libraries? Or may be you know even better implementation?
edit
I'm going to create something similar to static picture, but with piece оf animation. For example floating clouds on the sky, flower where you can tear off a petal and throw it. May be some animation with sun. This is general description, hope this helps.

There is Processing.js, which is a port of Processing for Java. Processing.js is ideal for 2d images.
Raphaël uses svg to draw images, which results in more compatibility.
For 3d there is Three.js, which uses both canvas and webgl.
There are a lot of different libraries around, you should first find out what you want to draw.
http://javascript.open-libraries.com/utilities/drawing/10-best-javascript-drawing-and-canvas-libraries/

cgSceneGraph is a javascript animation framework providing a full animation engine with timelines, animation keys, ...
It also provides helper methods to easily add animations on every attribute of an element.
The example on the home page of the website is exactly what you talk about, so it should fit your need :)

For simple animations forget the canvas and use position: absolute div elements with background image that you can move around with CSS transform translate3d and scale3d.

Shape tween in javascript

Is there a way to do a shape tween in javascript?
Using canvas maybe...

Shape tween as in Flash is harder to find than motion tween and simple attributes interpolation (like in JSTweener, Tween.lib, JQuery's animate(), d3's transition(), RaphaelJS's animate(), etc.). Those libraries, some cited in the other answers, don't do shape tweening.
You first need to know if you want to draw with SVG or with canvas and what library you will be using. Then, you need an interpolator, a function that will compute the transition between two given shapes, that can write a proper path in SVG or canvas. I wrote an implementation for SVG in D3.js to do some animated transitions between a lot of different shapes (using Gielis's superformula), if someone still need one. You can find an example here

If you will be doing graphics on the HTML 5 canvas element, you may want to check the Processing.js library. There is a tweening library, but you will probably find it helpful for many other things.
Processing.js uses JavaScript to draw
shapes and manipulate images on the
HTML 5 Canvas element. The code is
light-weight, simple to learn and
makes an ideal tool for visualizing
data, creating user-interfaces and
developing web-based games.
For tweening, you may want to have a look at the following:
Tween.lib - Motion Tweening for Processing.js
Motion Tweening for Processing.js

Some animated examples here combine motion|shape tweening using RaphaelJS. Check out the ones on the bottom:
http://raphaeljs.com/animation.html

For tweens in Javascript use http://coderepos.org/share/wiki/JSTweener

I use tween.js (http://learningthreejs.com/) a great library that will tween anything. If you already use jQuery I would also recommend looking into it's animate function.

Using JavaScript to model 3D polyhedra

Is there a JavaScript library that models 3D polyhedra using the canvas tag or SVG? Say I wanted to produce renderings of the Platonic solids, how would I best achieve this? FWIW, I'm only concerned with WebKit-based web browsers such as Safari and Chrome.
I've seen this cool demo of how to render 3D triangles, but how might I extend it to polyhedra with an arbitrary number of sides?

Take a look at this library: SVG-VML-3D
It uses SVG and falls back to VML on MSIE.
They do have a demo with platonic solids. I don't have a Webkit-browser handy, but presume it should work there as well.

Not a direct answer to your question, but seeing as you mentioned WebKit-only I thought I'd point out the new 3D CSS Transform support which was added to webkit pretty recently. This allows you to do what you want without using any Javascript. I've not seen an example of 3D polyhedra, but there are examples of cubes etc out there - for example here.
There's a slightly more complex demo here which has a ring of rectangles. For a real taste of what you could do (although this does use Javascript for animation) - see the Snow Stack demo.

Most 3D libraries generalize triangles. If you want a polygon with more than 3 sides, you subdivide it into triangles and draw those triangles. If you're interested in just the platonic solids, then you're going to have a pretty easy time, because you can easily get a triangluation of each face by first averaging the vertices of each face, and then using that center and two adjacent vertices of the face to give you a triangularization.