Create a Canvas and add a Text Element to it for v2

Developer
1
Important Notice
Bluescape is in the process of decommissioning public v2 APIs.
As part of this process, this guide will be removed from the Community at the time of the August 2023 Release. To prepare for this, visit the Create a Canvas and add a Text Element to it for v3 topic to familiarize yourself with the v3 API process.

Objective: Create a new Canvas in your Workspace and add a Text element to this new Canvas. You will learn how to get the IDs of newly created objects within your Workspace, and how to use them to associate other objects with them. You will need the workspaceId.
This page contains the implementation details for v2 REST APIs. You can also see the example for v3 APIs.

Implementation using REST APIs v2

Create Canvas

Endpoint /v2/workspaces/<SET_WORKSPACEID>/elements/canvas
Method POST
Comments You need to know the workspace ID.

Create Text within Canvas

Endpoint /v2/workspaces/<SET_WORKSPACEID>/elements/canvas/<canvas_id>/text
Method POST
Comments You need to know the Canvas ID

Code sample

See below code samples in Python and Node.js.

Node.js 
// Node.js Javascript
/*

How to run:
node this_script_name.js

Requires "axios" module (0.19.0), run:
npm install axios

website: https://github.com/axios/axios

*/

var axios = require('axios');

const token = '<SET_TOKEN>';
const portal = 'https://api.apps.us.bluescape.com';
const workspace_uid = '<SET_WORKSPACE_ID>';
const api_version = 'v2';
var api_endpoint = '/workspaces/' + workspace_uid + '/elements/images';

function runRequest(portal,api_version,api_endpoint,the_method,data_load) {
    var request_values = {
        url : portal + '/' + api_version + api_endpoint,
        method : the_method ,
        headers : {
            'Authorization': "Bearer " + token,
            'Content-Type' : 'application/json'    
        },
        data : data_load,
    };

    let req = axios(request_values)
            .catch(error => { 
                console.error('ERROR processing ' + portal + '/' + api_version + api_endpoint);
                console.error(error.message); 
                console.error(error.response.data);
                return Promise.reject(error);
            });;
    
    return req;
}

async function runAPIRequests() {
    try {

        // Create canvas

        api_endpoint = '/workspaces/' + workspace_uid + '/elements/canvas';
        the_method = 'POST';
        var currtime = new Date().toISOString().slice(0,16).replace('T',' ');

        data_load = {
            'x': 1000,
            'y': 1000,
            'width': 4000,
            'height': 4000,
            'name': "New Canvas - Creation time: " + currtime ,
            'borderColor': 'Yellow'
        }
        
        var canvas_creation = await runRequest(portal,api_version,api_endpoint,the_method,data_load);

        const canvas_id = canvas_creation.data.canvas.id;

        console.log("canvas ID: " + canvas_id);

        // Now add a Note to the Canvas

        currtime = new Date().toISOString().slice(0,16).replace('T',' ');

        api_endpoint = '/workspaces/' + workspace_uid + '/elements/canvas/' + canvas_id + '/text'
        method = 'POST';
        data_load = {
            "x": 400,
            "y": 400,
            "text": "Hello! New Text, added at " + currtime
        }


        var text_creation = await runRequest(portal,api_version,api_endpoint,the_method,data_load);

        var text_id = text_creation.data.note.id;

        console.log('Text ID: ' + text_id);

    } catch (error) {
        console.error('ERROR:');
        console.error(error.message);
    }
}

// Run the requests
runAPIRequests();
Python 
## Python Code (python 3.5+)
import requests
import datetime
import pprint

'''

Required modules:
    requests 2.22.0

'''

token = '<SET_TOKEN>'        

if __name__ == "__main__":
    portal = 'https://api.apps.us.bluescape.com' 
    workspace_uid = '<SET_WORKSPACE_ID>'  # REMEMBER TO ADD WORKSPACE UID

    # Create new Canvas
    # Path:     /v2/workspaces/<workspace_uid>/elements/canvas

    API_endpoint = '/v2/workspaces/' + workspace_uid + '/elements/canvas'

    timestamp = datetime.datetime.now()

    data_load = {
        'x': 10000,
        'y': 1000,
        'width': 4000,
        'height': 4000,
        'name': "New Canvas - Creation time: " + str(timestamp),
        'borderColor': 'Yellow'
    }

    the_request = requests.post(
        portal + API_endpoint,
        headers={"Authorization": "Bearer " + token,
                    "Content-Type": "application/json"
                    },
        json=data_load
    )

    json_response = the_request.json()
    # pprint.pprint(json_response) 

    canvas_id = json_response['canvas']['id']

    # Add a Note to a canvas  
    # Path: 	/v2/workspaces/<workspace_uid>/elements/canvas//text

    API_endpoint = '/v2/workspaces/' + workspace_uid + '/elements/canvas/' + canvas_id + '/text'
    params = ''

    timestamp = datetime.datetime.now()

    # The X and Y coordinates for objects within a Canvas are relative to the top left corner of the Canvas
    data_load = {
        "x": 400,
        "y": 400,
        "text": "Hello! New Text, added at " + str(timestamp)
    }

    the_request = requests.post(
        portal + API_endpoint,
        headers={"Authorization": "Bearer " + token,
                    "Content-Type": "application/json"
                    },
        json=data_load
    )

    json_response = the_request.json()

    pprint.pprint(json_response)

    text_id = json_response['text']['id']

OUTPUT

Output Json sample

Canvas creation

From this answer you can obtain the newly created Canvas ID: [‘canvas’][‘id’]

{'canvas': {'borderColor': 'Yellow',
            'height': 4000,
            'id': '5d3f40a660c139001477f4ea',
            'name': 'New Canvas - Creation time: 2019-07-29 11:53:26.290894',
            'order': 215,
            'width': 4000,
            'x': 10000,
            'y': 1000}
}

Text creation

{
    "text": {
        "id": "60b9bfb39ce614001754291b",
        "workspace_id": "F1rv19jfopwAbjgQVKLY",
        "x": 1000,
        "y": 900,
        "width": 600,
        "height": 400,
        "text": "Hello! New Text, added at 2021-05-26T23:26:43Z",
        "fontSize": 64,
        "fontFamily": "Dosis",
        "fontColor": "#0000FF",
        "fontWeight": "normal",
        "fontStyle": "normal",
        "textTransform": "inherit",
        "backgroundColor": "#FFFFFF",
        "pin": false,
        "order": 1
    }
}

Where to Next?

Not what you were looking for? Reply below or Search the community and discover more Bluescape.