The Canvas Control
The closest analogous element to a XAML Canvas Control in XHTML is a div with a number of absolutely positioned elements inside. Instead of a table-like grid structure where child elements live inside of cells, a canvas simply lets you position child elements like you were rearranging furniture or tacking pictures to a wall. You probably aren’t expecting the floor or walls to change dimensions, so you aren’t thinking about how your pictures and furniture are going to react in that scenario. You’re just arranging them and expecting them to stay put.
Canvases aren’t typically the best choice for laying out a UI. They are better suited to situations where elements are not going to be arranged in a geometric pattern or scaled in a complex fashion.
Take for example the game below. The individual pieces may have a convenient layout control for arranging them in the honeycomb pattern, but the overall gaming space is somewhat freeform. The ball is expected to move around without changing the position of other elements in the typical fashion of a UI. This would be a good candidate for a Canvas.
This game is a good candidate for use of a Canvas control.
In the next section, you’ll get a little practice with grids and canvases by creating them in Expression Blend.