Documentation

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

Browse the canvas library