# Custom Shapes

## Content

SpreadJS provides support for adding custom shapes in worksheets based on specific requirements. You can customize the shape model to draw a shape of your choice just like the way graphics are drawn onto a canvas.

Shared below is a screenshot that depicts a custom shape added to the worksheet.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/custom_shapes.png)

The following code sample shows how to add a custom shape to the worksheet.

```javascript
// Adding a custom shape to the worksheet
window.onload = function ()
{
   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   var sheet = spread.getActiveSheet();
   // Define a model to create custom shape
   var model =
    {
       left: 50,
       top: 50,
       width: 300,
       height: 300,
       options:
       {
            fill:
              {
                type: 1,
                color: "green",
                transparency: 0.5,
               },                    
             stroke:
               {
                 type: 1, // solid fill (now only support solid fill)
                 color: "blue",
                 width: 3                   
                }                    
          },
                path: [
                 [
                        ["M", 4, 1], // M: move to (x, y)
                        ["L", 104, 1], // L: line to (x, y)
                        ["L", 4, 94],
                        ["L", 104, 94],
                        ["L", 4, 1],
                        ["M", 4, 47],
                        ["L", 104, 47],
                        ["Z"]
                  ]
                ]
            };
    //Add defined custom shape to sheet
    sheet.shapes.add('name', model);          
} 
```

> **Note:** SpreadJS doesn't support the following scenarios while integrating custom shapes:
>
> * Importing and exporting custom shapes to an excel file is not supported as of now.
> * Shape text will only support horizontal direction, horizontal and vertical text alignment, solid color fill, font (name and size) and margins, etc.
> * Flipped shapes (horizontal/vertical or both) are not fully supported as of now.
> * The HitTest feature in the shape type callout with out of shape bounds part is not fully supported. Hence, users can't select a shape by clicking the out-of-shape bound part.