#

# Example: Basic Graphics Implementation

This example shows how to use the `Graphics` to create a basic shape.

## HTML

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

## CSS

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

## Javascript

Create a `Graphic` instance

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

Use the `addShape` method to create an ellipse.

    var myellipse = mygraphic.addShape({
        type: "ellipse",
        fill: {
            color: "#9aa"
        },
        stroke: {
            weight: 2,
            color: "#000"
        }
    });

## Complete Example Source

    <div id="mygraphiccontainer"></div>
    <script>
        YUI().use('graphics', function (Y)
        {
            //create a graphic instance
            var mygraphic = new Y.Graphic({autoSize:true, render:"#mygraphiccontainer"});

            //create an ellipse with addShape
            var myellipse = mygraphic.addShape({
                type: "ellipse",
                fill: {
                    color: "#9aa"
                },
                stroke: {
                    weight: 2,
                    color: "#000"
                },
                width: 150,
                height: 100,
                x: 35,
                y: 35
            });
        });
    </script>