const { imageHelpers } = window.canva;
const canva = window.canva.init();
canva.onReady(async (opts) => {
// Keep track of the assets
state.assets = opts.assets;
// Keep track of the element
state.element = opts.element;
state.image = await imageHelpers.fromElement(state.element, "preview");
// Convert the image into an HTMLCanvasElement
state.canvas = await imageHelpers.toCanvas(state.image);
document.body.appendChild(state.canvas);
// Keep track of the selected preset
state.selectedPreset = opts.presetId;
// Render the image with preset applied
canva.onPresetsRequest(async (opts) => {
categoryId: "categoryOne",
categoryId: "categoryTwo",
categoryId: "categoryTwo",
// Download the thumbnail images
const thumbnails = await Promise.all(
presets.map((preset) => {
const assetUrl = state.assets[preset.id + ".png"];
return imageHelpers.fromUrl(assetUrl);
return presets.map((preset, index) => {
image: thumbnails[index],
canva.onPresetSelected(async (opts) => {
// Keep track of the selected preset
state.selectedPreset = opts.presetId;
// Re-render the image when a user selects a preset
canva.onImageUpdate(async (opts) => {
// Handle image update requests from Canva
state.image = opts.image;
canva.onSaveRequest(async () => {
// Download the full image
state.image = await imageHelpers.fromElement(state.element, "full");
// Return the image to Canva
return await imageHelpers.fromCanvas(state.image.imageType, state.canvas);
async function renderImage() {
const img = await imageHelpers.toImageElement(state.image);
const context = state.canvas.getContext("2d");
if (state.selectedPreset === "invert") {
context.filter = `invert(100%)`;
if (state.selectedPreset === "grayscale") {
context.filter = `grayscale(100%)`;
if (state.selectedPreset === "sepia") {
context.filter = `sepia(100%)`;
context.drawImage(img, 0, 0, state.canvas.width, state.canvas.height);