This is an old documentation. Go to the latest Customer's Canvas docs

Calculating Area of Design Layers

Normally, in web-to-print solutions, product prices are calculated based on the paper type and size, number of outputs, etc., and do not depend on the precise design size. However, there is a relatively new but very popular product type - vinyl stickers - where pricing is mainly based on a product area. So, if you make customizable vinyl products, you cannot continue without knowing how to measure products, which this topic dwells on.

In Customer's Canvas, you can get measurements of bounding rectangles both for all the layers in a product or for currently selected layers only. The first one, covering all product layers, allows for calculating the total price both when the product is being personalized and after the personalization is finished. And the latter one, dealing with only currently selected layers, allows for calculating their price when being personalized by a user.

Bounding rectangles for selected layers and all layers of the product.

Let us see how you can measure this vinyl nameplate.

Getting Overall Measurements of a Product After Customization Is Done

When the product customization is finished, the Editor.finishProductDesign method should be used. It returns an object implementing the IFinishDesignResult interface, where IFinishDesignResult.boundsData provides the bounding rectangle that covers all the product layers. The following snippet gets the data and outputs it to the console.

    .then(function (result) {
        console.log(JSON.stringify(result.boundsData, null, 4));

The output of the previous example looks as follows:

    "currentSurface": {
        "Left": 104.8,
        "Top": 80.8,
        "Width": 809.2386,
        "Height": 339.2

We presume that any vinyl product has only one surface with one print area. So, currentSurface acts as the only surface of the product, and it includes all the product layers. currentSurface provides the following measurements:

  • Left - the x-coordinate of the bounding rectangle's top-left corner relative to the print area.
  • Top - the y-coordinate of the bounding rectangle's top-left corner relative to the print area.
  • Width - the width of the bounding rectangle.
  • Height - the height of the bounding rectangle.

All the measurements are made in points. So, if you want to get the area of the bounding rectangle in square inches, use the following formula:

S = (width x height) / 5184

Getting Product Measurements During Customization

When personalizing the product, it is possible to get measurements of the bounding rectangles using the BoundsNotification event. This event is sent on:

  • product load
  • layer selection
  • layer size change
  • layer position change

The following snippet subscribes to the BoundsNotification event and outputs the event arguments to the console.

<!DOCTYPE html>

<html lang="en">
    <meta charset="utf-8" />
    <!-- The IFrame API script. IMPORTANT! Do not remove or change the ID. -->
    <script id="CcIframeApiScript" type="text/javascript" src="">
    <!-- The iframe to display the editor in. -->
    <iframe id="editorFrame" width="100%" height="800px"></iframe>

// Defining the product.
productDefinition = { surfaces: [ "Nameplate" ] };
// Getting the iframe element to display the editor in.
var iframe = document.getElementById("editorFrame");
// Loading the editor.
var editor = null;
CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
    .then(function(e) {
        editor = e;
                console.log("BoundsNotification fired."); 
                console.log(JSON.stringify(args, null, 4)); 

The output of the previous snippet looks as follows:

    "selectedGroup": {
        "items": [
        "groupBounds": {
            "Left": 598.1289,
            "Top": 184.28891,
            "Width": 315.9,
            "Height": 137.022156
    "overallBounds": {
        "Left": 104.8,
        "Top": 80.8,
        "Width": 809.2386,
        "Height": 339.2

Here, selectedGroup contains layers currently selected by the user in the editor and overallBounds includes all product layers. The measurements are made in the same way as we discussed the overall measurements. Also, you can calculate the area of both the bounding rectangles in square inches using the same formula.

See Also


IFrame API Reference