Skip to main content


The Dopple Visual instance comes with a captureImage method that will take a snapshot of the 3D scene from the user’s current point of view. This will generate a PNG image, which can then be saved to the user’s device.

captureImage takes in an object with parameters for the filename, image size, and anti-aliasing settings.

const renderCanvas = document.getElementById('my-canvas')

const captureSnapshot = () => {
new Atlatl.Visual(renderCanvas).captureImage({
name: 'my-filename', // ".png" will be appended to the end automatically
sizeOptions: {
height: 1080, // image height in pixels
width: 1920 // image width in pixels
antialiasing: true // or false

Full code example

<html lang="en">
<meta charset="utf-8">
<title>My Page</title>
<!-- Link to the Visual Component's scripts -->
<script src="" defer></script>
<!-- Link to custom scripts -->
<script src="scripts.js" defer></script>
<!-- Canvas to render the 3D scene too -->
<canvas id="my-canvas"></canvas>
<button id="snapshot-button">Capture snapshot</button>