This is used by all the functions below, it represents all the shared state needed to render stuff. If you don't use sprite animations you can use 0 for the time parameter.

Creates a canvas element that renders the given Renderables.

If you don't use animated sprites, you can use 0 for the time parameter.

render { time = time, size = (800, 600), camera = state.camera }
    [ Background.render
    , Player.render state.Player
    ]

Same as above, but you can specify additional attributes that will be passed to the canvas element. A useful trick to save some GPU processing at the cost of image quality is to use a smaller size argument and than scale the canvas with CSS. e.g.

renderWithOptions [style [("width", "800px"), ("height", "600px")]]
    { time = time, size = (400, 300), camera = camera }
    (World.render model.world)

Same as render, but wrapped in a div and nicely centered on the page using flexbox

Same as above, but you can specify attributes for the container div and the canvas.

renderCenteredWithOptions
    containerAttributes
    canvasAttributes
    renderConfig
    renderables