1N/A<style scoped>

1N/A#custom-doc { width: 95%; min-width: 950px; }

1N/A#pagetitle {background-image: url(../../assets/bg_hd.gif);}

1N/A#mygraphiccontainer {

1N/A position: relative;

1N/A width: 700px;

1N/A height:400px;

1N/A}

1N/A</style>

1N/A<div class="intro">

1N/AThis example shows how to use the `Graphics` to create a basic shape.

1N/A</div>

1N/A<div class="example">

1N/A{{>graphics-simple-source}}

1N/A</div>

1N/A

1N/A<h2>HTML</h2>

1N/A```

1N/A<div id="mygraphiccontainer"></div>

1N/A```

1N/A

1N/A<h2>CSS</h2>

1N/A```

1N/A#mygraphiccontainer {

1N/A position: relative;

1N/A width: 700px;

1N/A height:400px;

1N/A}

1N/A```

1N/A

1N/A<h2>Javascript</h2>

1N/A<p>Create a `Graphic` instance</p>

1N/A```

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

1N/A```

1N/A

1N/A<p>Use the `addShape` method to create an ellipse.</p>

1N/A```

1N/A var myellipse = mygraphic.addShape({

1N/A type: "ellipse",

1N/A fill: {

1N/A color: "#9aa"

1N/A },

1N/A stroke: {

1N/A weight: 2,

1N/A color: "#000"

1N/A }

1N/A });

1N/A```

1N/A<h2>Complete Example Source</h2>

1N/A```

1N/A{{>graphics-simple-source}}

1N/A```

1N/A