Canvas Generation comes with a Canvas API for developers and platform owners.
Learn how to access a library of hundreds of up-to-date tools.
The Canvas API
API Endpoint:
https://canvasgeneration.com/api/v1/canvas/
Name | Type | Default | Description |
---|---|---|---|
public | boolean | true | Returns public / private canvases only |
apikey | string | - | Required. Your private API key. |
bookmarks | boolean | false | Returns bookmarks of owner only |
owner | boolean | false | Returns only canvases created by owner |
id | comma-separated | number | - | Returns only the canvas(es) with id(s) |
Example: Download a list of canvases created by you that are public
https://canvasgeneration.com/api/v1/canvas/?owner=true&public=true&apikey=a75a928d103502aw3j345
Response:
[ {...}, {...} ] // array of canvas objects, see below
Canvas objects
Example: Download the canvas with ID 153 to update its contents.
https://canvasgeneration.com/api/v1/canvas/?id=153&apikey=a75a928d103502aw3j345
Response:
// array of canvas objects
[
{
about: {
name: 'Example canvas',
short_description: 'Innovate with this example canvas',
description: '...',
language: 'en-US',
time: '30 minutes',
difficulty: '2/5', // or 'hard'
people: '3-5',
tutorial: '...',
version: '...',
url: 'https://www.example.com/canvas/',
},
canvas: {
image: 'https://www.example.com/canvas_image.png',
image_zones: 'https://www.example.com/canvas_image_zones.png', // optional image used specifically with zones. Fallback is 'image'.
thumbnail: 'https://www.example.com/canvas_thumbnail.jpg',
pdf_url: 'https://www.example.com/canvas.pdf',
zones: [ {...}, {...} ], // array of zone objects, see below
size: 'A4', // or 'A5'
orientation: 'landscape', // or 'portrait' or 'square'
image_fit: 'contain', // or 'fill' or 'cover'
},
canvasgeneration: {
url: 'https://canvasgeneration.com/canvas/example-canvas/',
id: 153,
api: 'https://canvasgeneration.com/api/v1/?id=153',
related: [163, 193],
},
creator: {
name: 'Wedesignthinking',
avatar: 'https://www.canvasgeneration.com/avatars/wedesignthinking.png',
description: 'Accelerate innovation visually!',
url: 'https://www.wedesignthinking.com/',
},
license: {
attribution: 'Example canvas created by Wedesignthinking',
attribution_url: 'https://www.example.com/canvas/license/',
license: 'Creative Commons Attribution - Share Alike 4.0 International license',
license_url: 'http://creativecommons.org/licenses/by-sa/4.0/',
commercial_use: true, // or false
personal_use: true, // or false
},
options: {
image: true, // or false
zones: true, // or false
content: true, // or false
pdf: true,
},
}
]
Zone objects
Example of a zone object from the above snippet
zones: [ {...}, {...} ], // array of zone objects, see below
{
font: 'default',
fontsize: '20',
height: 30, // width and height of 30 results in a square zone.
label: 'Step 1', // or anything else like 'important'
left: 35, // 0-100. 35 starts at about a third of the canvas width
title: 'Key Resources',
tooltip: 'Questions or useful tips that apply to this zone are...',
top: 10,
type: 'zone',
width: 30, // 0-100. 50 means the zone is half the width of the canvas.
children: [ {...}, {...} ], // array of content objects, see below
}
Content objects
Example of a content object from the above snippet
children: [ {...}, {...} ], // array of content objects, see below
Example of a heading object
{
bold: false,
data: '',
font: 'default',
fontsize: '20',
italic: false,
type: 'heading',
underline: false
}
Example of a paragraph object
{
bold: false,
data: "This paragraph is - of course - of the Paragraph type.",
font: "default",
fontsize: "12",
italic: false,
type: "paragraph",
underline: false
}
Example of a link object
{
icon: "fas fa-ticket-alt",
icon_show: true,
name: "Get your tickets here!",
size: "md",
style: "primary",
type: "link",
url: "#"
}
Example of a list object
{
children: [ {...}, {...} ], // array of list items
font: "default",
fontsize: "12",
title: "",
token: "4814le24zf",
type: "list"
}
Example of list items
[
{
data: "This is amazing!",
icon: "fas fa-check",
type: "list_item"
}, {
data: "Not very nice",
icon: "fas fa-times",
type: "list_item"
}
]
Example of a icon object
{
icon: "fas fa-rocket",
iconsize: "large",
type: "icon"
}
Example of a time object
{
data: "Launch Q2 2020",
type: "time"
}
Example of a image gallery object
{
children: [ {...}, {...} ], // array of image items
columns: "2",
type: "gallery"
}
Example of image items
[
{
caption: ""The Night Watch" by Rembrandt van Rijn",
caption_overlay: true,
caption_url: "https://www.rijksmuseum.nl/nl/nachtwacht",
src: "https://www.example.com/image.jpg",
type: "image"
}
]
Example of a tasks object
{
children: [ {...}, {...} ], // array of task items
font: "default",
fontsize: "12",
progress: false,
type: "tasks"
}
Example of task items
[
{
data: "Something important!",
done: false,
type: "task"
}
]
Example of a YouTube object
{
type: "youtube",
url: "https://www.youtube.com/watch?v=4GnVDPD01as"
}
Example of a Vimeo object
{
type: "vimeo",
url: "https://vimeo.com/399671714"
}