Documentation


Canvas Generation comes with a Canvas API for developers and platform owners.
Learn how to access the canvas library. Always up-to-date.


The documentation is currently in beta. Details are likely to change.

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
These queries are very heavy as they return a large number of canvases and information. Queries that aren't limited with the 'id' option will only be allowed once every hour. This means your application needs some sort of caching built in.

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
}
Size and position values are relative to 100% of the width of an A4 landscape (width: 100, height: 70.7).

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 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 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"
}

Browse the canvas library

The growing library of 100+ canvases, created by Wedesignthinking and friends under a Creative Commons license.

Browse all canvases