Attached is a sample. It doesn't cover everything, but it should give a taste.
You can get the grid to show up just by turning on the game's map feature. However, that will draw the room map in the grid as well. This sample circumvents that by simply making a couple of calls in the game setup script to turn on the grid on its own:
// Show grid.
JS.ShowGrid(game.mapsize)
Grid_SetScale (game.mapscale)
If you want the room map as well, then you can remove those lines and just enable the map feature.
The ids are used to allow shapes to be updated. For example, if you draw an arrow with id "arrow" and then draw another arrow in a different place with the same id, then the arrow will move there. The old position will be erased. (At least, that is the theory as I see it based on the docs. I haven't tried it myself.)
Color values can be standard HTML color strings (either color names like "red", "blue", etc or more advanced like "'#45FF30").
I suppose this could be added in the Libraries and Samples forum, if it seems an adequate sample.
<!--Saved by Quest 5.5.5328.26617-->
<asl version="550">
<include ref="English.aslx" />
<include ref="Core.aslx" />
<game name="customdrawingsample">
<gameid>757f07bc-23f5-448d-a0c5-0928e4e9abf9</gameid>
<version>1.0</version>
<firstpublished>2014</firstpublished>
<showtitle type="boolean">false</showtitle>
<start type="script">
// Show grid.
JS.ShowGrid(game.mapsize)
Grid_SetScale (game.mapscale)
// Show the custom layer
Grid_ShowCustomLayer (true)
// Draw some stuff.
Grid_DrawSquare ("asquare", 0, 0, 2, 2, "A Square", "#ff0000")
Grid_DrawArrow ("arrow1", 6, 4, 8, 4, "#c0c0c0", 2)
Grid_DrawArrow ("arrow2", 8, 4, 8, 6, "#ca8642", 2)
// Create and draw a shape.
Grid_AddNewShapePoint(5, 5)
Grid_AddNewShapePoint(6, 8)
Grid_AddNewShapePoint(8, 9)
Grid_AddNewShapePoint(10, 8)
Grid_AddNewShapePoint(11, 5)
Grid_AddNewShapePoint(8, 8)
Grid_DrawShape("shapey", "blue", "yellow", 1)
</start>
</game>
<object name="room">
<inherit name="editor_room" />
<object name="player">
<inherit name="editor_object" />
<inherit name="editor_player" />
</object>
<exit alias="north" to="north room">
<inherit name="northdirection" />
</exit>
</object>
<object name="north room">
<inherit name="editor_room" />
<exit alias="south" to="room">
<inherit name="southdirection" />
</exit>
</object>
</asl>