package vg

You can search for identifiers within the package.

in-package search v0.2.0

On This Page

HTML canvas render targets
Text rendering
Render warnings and limitations

package vg

vg
- Vg
  - Font
  - I
  - P
  - Vgr
    
    Manual
    
    Private
    
    Data
    
    Font
    
    I
    
    P
vg.htmlc
- Vgr_htmlc
vg.svg
- Vgr_svg

Legend:
Library
Module
Module type
Parameter
Class
Class type

Vg HTML canvas renderer.

References.

Rik Cabanier et al. HTML Canvas 2D Context, 2012-12-17.

v0.9.2 - homepage

HTML canvas render targets

val screen_resolution : Gg.v2

screen_resolution is the screen resolution in pixels per meters.

val target : 
  ?resize:bool ->
  ?resolution:Gg.v2 ->
  Dom_html.canvasElement Js.t ->
  [ `Other ] Vg.Vgr.target

target resize resolution c is a render target for rendering to the canvas element c.

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 I.const images.

Render warnings and limitations

The following render warnings are reported.

`Unsupported_cut ((`O o), i), outline area cuts can be performed only on (possibly transformed) I.const, I.axial and I.radial primitive images.
`Unsupported_glyph_cut (a, i), glyph cuts can be performed only on bare I.const primitive images and outline area glyph cuts are currently unsupported.
`Textless_glyph_cut i if no text argument is specified in a glyph cut.
`Other _ if dashes are rendered but unsupported by the browser.

The following limitations should be taken into account.

The even-odd area rule is supported according to the latest whatwg spec. This may not work in all browsers.
In the HTML canvas gradient color interpolation is performed in (non-linear) sRGB space. This doesn't respect Vg's semantics.