Pan on Click and Drag

Demo

Click and drag the canvas to move the content.

This animation is based on an original codepen by Elton Kamami.

Code

Typescript

// Canvas/draw setup
const ctx = document.getElementById('ClickPanCanvas').getContext('2d');
const draw = getParticleDrawer(ctx.canvas);

// Create pan handler
const PAN_OPTIONS = {
    fill_style: "rgba(0, 0, 0, 1)",
};
const panHandler = new PanHandler(ctx, PAN_OPTIONS);

// Attach scroll zoom plugin
const clickPan = new ClickPan((deltaX, deltaY) => {
    panHandler.pan(deltaX, deltaY);
});
clickPan.addTarget(ctx.canvas);

// Run the render loop
const loop = () => {
    panHandler.clear();
    draw();
    requestAnimationFrame(loop);
};

loop();

HTML

<canvas id="ClickPanCanvas" class="demo-canvas" width="300" height="300"></canvas>