The PixelPaper JavaScript object comes with a bunch of handy, accessible methods that you can use to create custom workflows and experiences for your users. We've documented these below. Please note, this is an incomplete list! If you'd like lower-level access to PixelPaper's features, drop us an email.
Upload an image file or a PDF
// Upload a file and center it
await pixel.uploadFile("https://your.domain.com/images/chessboard.jpg");
// Upload a file and place it at 10, 10
await pixel.uploadFile("https://your.domain.com/images/chessboard.jpg", { x: 10, y: 10" });
// Upload a file, place it at 10, 10 and scale so that its width is 300 pixels.
await pixel.uploadFile("https://your.domain.com/images/chessboard.jpg", { x: 10, y: 10" }, 300);
This file must reside on the same top-level domain as the page in which you're embedding the whiteboard (for example - whiteboards embedded at 'sub.domain.com' will be able to use images from 'images.domain.com').
The image file must be publicly accessible, and its CORS headers must allow the source page to load from the embedding domain.
Get whiteboard dimensions
let dimensions = await pixel.getPixelPaperDimensions();
dimensions = {
height: 1283,
points: {
bl: { x: 0, y: 1283 },
br: { x: 1019, y: 1283 },
tl: { x: 0, y: 0 },
tr: { x: 1019, y: 0 }
},
width: 1019
}
Set background color on a page
// Sets the background color of the current page to green
await pixel.setBackgroundColor("#00ff00")
Disconnect
pixel.disconnect();