OpenSeadragon plugin demo
You should see two plugins interacting. You can change the order of plugins and the logics!
// window.pluginA must be defined! draw small gradient square window.pluginA = async function(e) { const tile = e.tile; const ctx = await tile.getData('context2d'); const gradient = ctx.createLinearGradient(0, 0, 50, 50); gradient.addColorStop(0, 'blue'); gradient.addColorStop(0.5, 'green'); gradient.addColorStop(1, 'red'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 50, 50); await tile.setData(ctx, 'context2d'); }; // window.pluginB must be defined! overlay with color opacity 40% window.pluginB = async function(e) { const tile = e.tile; const ctx = await tile.getData('context2d'), canvas = ctx.canvas; ctx.fillStyle = "rgba(156, 0, 26, 0.4)"; ctx.fillRect(0, 0, canvas.width, canvas.height); await tile.setData(ctx, 'context2d'); }; // higher number = earlier execution window.orderPluginA = 1; window.orderPluginB = 0;
// Application of the plugins done automatically: viewer.addHandler('tile-loaded', window.pluginA, null, window.orderPluginA); viewer.addHandler('tile-invalidated', window.pluginA, null, window.orderPluginA); viewer.addHandler('tile-loaded', window.pluginB, null, window.orderPluginB); viewer.addHandler('tile-invalidated', window.pluginB, null, window.orderPluginB); viewer.requestInvalidate();
Apply