Compare behavior of Context2d and WebGL (via three.js) drawers

Context2d drawer (default in OSD <= 4.1.0)

New WebGL drawer

Image options (drag and drop to re-order images)

Use a custom plugin drawer - example using three.js

The context2d drawing operations in core OpenSeadragon have been consolidated from the
TiledImage
and
Tile
classes into the
Drawer
class, which inherits from a new
DrawerBase
base class. The
TiledImage
and
Tile
classes now handle the logic of managing tile positioning and image data, with cleaner separation from details of the rendering process.
DrawerBase
defines a public API that core OpenSeadragon code uses to interact with the drawer implementation. To use a custom drawer/render, define a new class that inherits from
DrawerBase
and implements the public API. The constructor of this class can be passed in during construction of the viewer using the new
customDrawer
option.
    import { ThreeJSDrawer } from './threejsdrawer.js';

    let viewer = OpenSeadragon({
        ...
        drawer: ThreeJSDrawer,
        ...
    });
                

HTMLDrawer: legacy pre-HTML5 drawer that uses <img> elements for tiles

HTML-based rendering can be selected in two different ways:
    // via the 'html' drawer option:
    let viewer = OpenSeadragon({
        ...
        drawer: 'html',
        ...
    });

    // or by passing the HTMLDrawer constructor
    let viewer = OpenSeadragon({
        ...
        drawer:OpenSeadragon.HTMLDrawer,
        ...
    });