Autodesk Canvas Library Version 1.0
Autodesk Canvas Library

Canvas Overview

The compatible Canvas constructor for Browser and Node.js environment. It is used for rendering graphs, graphics, or other visual images on the fly.

Introduced in Version: 1.0.0

1 Example:

    // Create a Canvas and get the 2d context object
    var canvas = new Canvas(200, 200);
    var ctx = canvas.getContext('2d');

    // Below codes demonstrate the APIs of 2d context object
    // Draw a slanted text
    ctx.font = '30px Impact';
    ctx.fillText("Awesome!", 50, 100);
    // Draw a line
    var te = ctx.measureText('Awesome!');
    ctx.strokeStyle = 'rgba(0,0,0,0.5)';
    ctx.lineTo(50, 102);
    ctx.lineTo(50 + te.width, 102);

    // Get the base 64 stream encoded image
    var dataUrl = canvas.toDataURL();
    Debug.log('The data url: ' + dataUrl)

    // Get the image data
    var imageData = ctx.getImageData(0, 0, 200, 200);
    var width = imageData.width;
    var height = imageData.height;
    var data =;

Class Member Summary

Class Member Details

• Canvas (width, height) | Constructor

The following parameters can be specified in the constructor:
  • width: Number - The width of canvas
  • height: Number - The height of canvas

Object getContext (contextId)

Returns a drawing context on the canvas, or null if the context ID is not supported. A drawing context lets you draw on the canvas.

Calling getContext with "2d" returns a CanvasRenderingContext2D object.

  • contextId: String - The context type, currently, it only support "2d"

String toDataURL ([type])

Returns a data:URL containing a representation of the image in the format specified by type(defaults to PNG).
  • type: String - The image type, currently, it only support "image/png" | Optional