This example makes special use of the new surface create command. This command allows you to attach a surface to a canvas that already exists IN your page.

This page uses 3 canvas elements and attaches views to each one, so that GameMaker:HTML5 will automatically render the level as it is supposed to look.

The level is split into 3 easily visible sections, and is put together using a table with fixed sizes, so that they stich together seamlessly.

Table layout

The image above shows how the tables have been created. Both the primary canvas and surface2 span multiple columns, while surface1 sits nicely in the middle. The tricky part is making sure there is no surrounding padding on either the table, or the canvas element, but once the the hard task of creating the layout has been completed, you can then add this file to the "Included Files" via the resources menu. After this, you can then tell GameMaker that you have a new index.html file by changing the HTML5 specific setting in the Global Game Settings.

Now that you have done all the hard work, you can get onto the fun part, which is making the game itself!

Now read the section on the left about how to actually implement all this!
First, get a good idea of what your level will look like; planning is every thing here. Once you have your level, you need to create your views. You can see the views I've used for my test level below.
Table layout
Once you've done that, you need to attach your views to the extra canvases in your index page.
  var s1,s2;
  s1 = surface_create_ext("surface1",192,550);
  s2 = surface_create_ext("surface2",608,186);
  view_surface_id[1]=s1;
  view_surface_id[2]=s2;
Once you've created and bound the surface to the view, you can now forget about it. GameMaker will now update and render the scene for you.

Your browser doesn't support HTML5 canvas.