#

# Example: Custom Shape

This example shows how to use the `Graphics` to create a custom shape. Currently, the `Graphics` module has four shapes:

- rect
- circle
- ellipse
- path

You can also create your own custom shapes. If you need to have reusable shapes, you can do this by extending the `Shape` class. Once you have created a custom class, you can instantiate it by passing a reference of your class in the `type` attribute of your config to the `addShape` method. In this example, we will create shape called `RoundedRect`.

## HTML

    <div id="mygraphiccontainer"></div>

## CSS

    #mygraphiccontainer {
        position: relative;
        width: 400px;
        height: 300px;
    }

## JavaScript

Create a custom class. When creating shapes, add a method called `_draw`. This is where you will put your drawing logic for the custom shape. You will also need to mix in any attributes that you need.

    var RoundedRect = function()
    {
        RoundedRect.superclass.constructor.apply(this, arguments);
    }
    RoundedRect.NAME = "roundedRect";
    Y.extend(RoundedRect, Y.Shape, {
        _draw: function()
        {
            var w = this.get("width"),
                h = this.get("height"),
                ew = this.get("ellipseWidth"),
                eh = this.get("ellipseHeight");
            this.clear();
            this.moveTo(0, eh);
            this.lineTo(0, h - eh);
            this.quadraticCurveTo(0, h, ew, h);
            this.lineTo(w - ew, h);
            this.quadraticCurveTo(w, h, w, h - eh);
            this.lineTo(w, eh);
            this.quadraticCurveTo(w, 0, w - ew, 0);
            this.lineTo(ew, 0);
            this.quadraticCurveTo(0, 0, 0, eh);
            this.end();
        }
    }, {
        ATTRS: Y.mix({
            ellipseWidth: {
                value: 4
            },

            ellipseHeight: {
                value: 4
            }
        }, Y.Shape.ATTRS)
    });
    Y.RoundedRect = RoundedRect;

Create a `Graphic` instance and render it to an `HTMLElement`

    var mygraphic = new Y.Graphic({render: "#mygraphiccontainer"}),

Using the `addShape` method, add an instance of the custom class to the `Graphic` instance.

    myroundrect = mygraphic.addShape({
        type: Y.RoundedRect,
        width: 300,
        height: 200,
        x: 50,
        y: 50,
        ellipseWidth: 12,
        ellipseHeight: 12,
        fill: {
            type: "linear",
            stops: [
                {color: "#9aa9bb", offset: 0},
                {color: "#eeefff", offset: 0.4},
                {color: "#00000f", offset: 0.8},
                {color: "#9aa9bb", offset: 1}
            ],
            rotation: 45
        },
        stroke: {
            weight: 2,
            color: "#000"
        }
    });

## Complete Example Source

    <div id="mygraphiccontainer"></div>
    <script>
    YUI({filter:"raw"}).use('graphics', function (Y)
    {
        var RoundedRect = function()
        {
            RoundedRect.superclass.constructor.apply(this, arguments);
        }
        RoundedRect.NAME = "roundedRect";
        Y.extend(RoundedRect, Y.Shape, {
            _draw: function()
            {
                var w = this.get("width"),
                    h = this.get("height"),
                    ew = this.get("ellipseWidth"),
                    eh = this.get("ellipseHeight");
                this.clear();
                this.moveTo(0, eh);
                this.lineTo(0, h - eh);
                this.quadraticCurveTo(0, h, ew, h);
                this.lineTo(w - ew, h);
                this.quadraticCurveTo(w, h, w, h - eh);
                this.lineTo(w, eh);
                this.quadraticCurveTo(w, 0, w - ew, 0);
                this.lineTo(ew, 0);
                this.quadraticCurveTo(0, 0, 0, eh);
                this.end();
            }
        }, {
            ATTRS: Y.mix({
                ellipseWidth: {
                    value: 4
                },

                ellipseHeight: {
                    value: 4
                }
            }, Y.Shape.ATTRS)
        });
        Y.RoundedRect = RoundedRect;

        var mygraphic = new Y.Graphic({render: "#mygraphiccontainer"}),
            myroundrect = mygraphic.addShape({
                type: Y.RoundedRect,
                width: 300,
                height: 200,
                x: 50,
                y: 50,
                ellipseWidth: 12,
                ellipseHeight: 12,
                fill: {
                    type: "linear",
                    stops: [
                        {color: "#9aa9bb", offset: 0},
                        {color: "#eeefff", offset: 0.4},
                        {color: "#00000f", offset: 0.8},
                        {color: "#9aa9bb", offset: 1}
                    ],
                    rotation: 45
                },
                stroke: {
                    weight: 2,
                    color: "#000"
                }
            });
        });
    </script>