# openseadragon-canvasoverlay-hd

> An OpenSeadragon plugin that adds canvas overlay capability and support multi-images.

Latest version **1.0.0** (published 2018-12-17) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install openseadragon-canvasoverlay-hd
pnpm add openseadragon-canvasoverlay-hd
yarn add openseadragon-canvasoverlay-hd
bun add openseadragon-canvasoverlay-hd
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-12-17 |
| First published | 2018-12-17 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| Author | Joshua Gould |
| Maintainers | jgould |
| Keywords | openseadragon, plugin, canvas, overlay |

## Links

- npm: https://www.npmjs.com/package/openseadragon-canvasoverlay-hd
- Repository: https://github.com/joshua-gould/OpenSeadragonCanvasOverlayHd
- Issues: https://github.com/joshua-gould/OpenSeadragonCanvasOverlayHd/issues
- npm.io page: https://npm.io/package/openseadragon-canvasoverlay-hd

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2018-12-17

## README

# OpenSeadragonCanvasOverlayHd

An [OpenSeadragon](http://openseadragon.github.io) plugin that adds canvas overlay capability and supports multi-images.

Compatible with OpenSeadragon 2.2.0 or greater.

## Documentation

To add a canvas overlay to your OpenSeadragon Viewer, create a new `OpenSeadragon.CanvasOverlayHd` instance, passing the OpenSeadragon viewer and configuration options. 
Configuration options are:
`onRedraw` - callback function that does the actual drawing
`clearBeforeRedraw` (default as true): clear canvas before redrawing. 

For example:

```javascript
const viewer = OpenSeadragon({
    id: 'viewer',
    tileSources: {
        Image: {
            xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
            Url: 'http://content.zoomhub.net/dzis/TDbz_files/',
            Format: 'jpg',
            Overlap: '1',
            TileSize: '254',
            ServerFormat: 'Default',
            Size: {
                Height: '4409',
                Width: '7793'
            }
        }
    }
});

const overlay = OpenSeadragon.CanvasOverlayHd(viewer, {
    onRedraw:function(options) {
      	let context = options.context;
        context.fillStyle = "red";
        context.fillRect(0, 0, 500, 500);            
    },
    clearBeforeRedraw:true
});
 ```  

[Demo](https://joshua-gould.github.io/OpenSeadragonCanvasOverlayHd/demo/index.html)

---
_Source: https://npm.io/package/openseadragon-canvasoverlay-hd · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._