0N/A<style scoped>

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

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

0N/A#mygraphiccontainer {

0N/A position: relative;

0N/A width: 700px;

0N/A height:400px;

0N/A}

0N/A</style>

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

0N/A<p>This example shows how to use the `Graphics` to create a basic shape.</p>

0N/A</div>

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

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

0N/A</div>

0N/A

0N/A<h2>HTML</h2>

0N/A```

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

0N/A```

0N/A

0N/A<h2>CSS</h2>

0N/A```

0N/A#mygraphiccontainer {

0N/A position: relative;

0N/A width: 700px;

0N/A height:400px;

0N/A}

0N/A```

0N/A

0N/A<h2>Javascript</h2>

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

0N/A```

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

0N/A```

0N/A

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

0N/A```

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

0N/A type: "ellipse",

0N/A fill: {

0N/A color: "#9aa"

0N/A },

0N/A stroke: {

0N/A weight: 2,

0N/A color: "#000"

0N/A }

0N/A });

0N/A```

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

0N/A```

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

0N/A```

0N/A