Canvas Help

• This page provides help for a content provider to create a comic strip for Resurnate.com with the Canvas tool.
• Once familiar with the tool and the format of the input data, it makes short work of generating a strip.
• To start, simply click the PREVIEW button using the sample input file (loaded by default).
• A preview of the generated strip will popup in a separate modal window, which can be closed by clicking the × or anywhere outside the modal.
• Edit the input in the content text area, preview the strip, close the popup modal and repeat until you have created your masterpiece.
• Be sure to intermittently copy and paste the input data to a file with a .json extension for safe keeping.

This tool is best suited for a larger screen device such as a desktop or laptop computer, versus a mobile device such as a phone.

Input

• This tool accepts the following input:

Buttons

• This tool supports the following buttons:

Content

• The input value of the Content text area is JSON-formatted data that has the following structure:

{
  "version": "1",
  "id": "2023-001",
  "title": "Experience, Meet Team",
  "author": "Quigley",
  "panels": [
    {
      ... (Panel 1 attributes)
    },
    {
      ... (Panel 2 attributes)
    },
    ...   (More panels)
  ]
}

• The following table describes the attributes and values in more detail:

Panels

• Each panel contains speech bubbles and captions with text.
• Every strip will display 2 panels per row, where a minimum of 4 panels (2 rows) is ideal.
• If there is an uneven number of panels, only the last row will have a single panel.
• All panels have the following structure:

{
  "image": "thought1",
  "bubbles": [
    {
      ... (Bubble 1 attributes)
    },
    ...   (More bubbles)
  ],
  "captions": [
    {
      ... (Caption 1 attributes)
    },
    ...   (More captions)
  ]
}

• The following table describes the attributes and values in more detail:

Attribute	Description
image	Determines the background image and the number of bubbles to fill with text. It is formatted as <type><bubbles>. For example, speech3. This would represent a background image with 3 speech bubbles. The following images are currently supported: speech1 speech3 whisper1 whisper3 thought1 thought3 burst1 burst3
bubbles	One or more bubble attributes, which should align with the number of bubbles in the background image. More details below.
captions	Up to 4 caption attributes, drawn in an appropriate corner of the panel based on position. More details below.

Bubbles

• Every panel must define an appropriate number of bubbles, as indicated by the panel background image.
• For example, if the panel image contains 3 bubbles, a bubble at each position should be defined.
• Each bubble defines the following attributes:

{
  "position": 1,
  "text": [
    "Just going to pump",
    "out some boilerplate",
    "crap I've done a thousand",
    "times before..."
  ]
}

• The following table describes the attributes and values in more detail:

Captions

• Every panel can optionally create up to 4 captions to provide context to the reader.
• They are the rectangular boxes in yellow or blue, which can appear in any corner.
• Each caption defines the following attributes:

{
  "position": 3,
  "text": [
    "Me",
    "(Motivated)"
  ]
}

• The following table describes the attributes and values in more detail:

Miscellaneous

• On the first row of the strip between the two panels, the copyright text is automatically generated and drawn.
• The content provider cannot override the copyright text.
• On the second row between the two panels, the attribution text is automatically generated and drawn.
• The attribution text leverages the id, title and author attributes.