Module Vgr_htmlc

HTML canvas renderer.


HTML canvas render targets

val screen_resolution : unit -> Gg.v2

screen_resolution () is the screen resolution in pixels per meters.

val target : ?resize:bool -> ?resolution:Gg.v2 -> 'a -> [ `Other ]

target resize resolution c is a render target for rendering to the canvas element c (you need to make sure this is an HTMLCanvasElement JavaScript object otherwise a runtime error will occur).

  • resize if true (default) sets the canvas CSS size to the physical size of renderables. If false the physical size of renderables is ignored and the view rectangle is simply mapped on the canvas CSS size at the given resolution but WARNING for this to work do not use any CSS border on the canvas element (outline can be used though) as it interacts badly with the underlying canvas size computation made by Vgr_htmlc (a typical symptom will be a vertically growing canvas on redraws, this seems to happen regardless of box-sizing).
  • resolution, specifies the rendering resolution in samples per meters. If unspecified the screen_resolution is used in both dimensions.

Multiple images. Multiple images render on the target is supported. Each new render clears the HTML canvas.

Text rendering

Text rendering uses the HTML canvas CSS font selection mechanism. As there is no control over glyph rendering in the HTML canvas, the glyph API is unsupported.

Given a glyph cut:

Vg.I.cut_glyphs ~text ~blocks ~advances font glyphs

The blocks, advances and glyphs parameters are ignored. text must be provided and is used to define the text to render. font is used to select the font in the CSS stylesheet. Make sure that the fonts you use are embedded and loaded in your DOM via \@font-face.

At the moment the renderer also needs to work around a particular browser bug which means that glyph cuts are currently limited to non-outline area cuts in Vg.I.const images.

Render warnings and limitations

The following render warnings are reported.

The following limitations should be taken into account.