# Edit in JSFiddle

```/**
* 極めてシンプルな例
*/
(function(){
/**
* [1] Raphael()でキャンバス（paper）をつくる
*/
var paper = Raphael( "my-paper-0", 64, 64 );
/**
* [2] circle()で円を描画し、
* [3] attr()で属性を設定する
*/
paper.circle( 32, 32, 24 )
.attr( { fill : "#345", stroke : "none" } );
})();

/**
* 角丸矩形を描く
* Paper.rect( x, y, width, height, radius );
*/
(function(){
var paper = Raphael( "my-paper-1", 64, 64 );
paper.rect( 8, 8, 48, 48, 8 )
.attr( { fill : "#345", stroke : "none" } );
})();

/**
* 楕円を描く
*/
(function(){
var paper = Raphael( "my-paper-2", 64, 64 );
paper.ellipse( 32, 32, 24, 16 )
.attr( { fill : "#345", stroke : "none" } );
})();

/**
* Pathを使って三角形を描く
*/
(function(){
var paper = Raphael( "my-paper-3", 64, 64 );
paper.path( "M32,8L56,56H8L32,8Z" )
.attr( { fill : "#345", stroke : "none" } );
})();

/**
* Pathを使って矢印を描く
* Paper.path( ... );
*/
(function(){
var paper = Raphael( "my-paper-4", 64, 64 );
paper.path( "M32,8L56,32L48,40L40,32V56H24V32L16,40L8,32L32,8Z" )
.attr( { fill : "#345", stroke : "none" } );
})();
```
```<div id="container">
<h1>Raphael Demo</h1>
</div>
<div id="content">
<div class="items">
<div class="item">
<h2>1. 円を描く : circle()</h2>
<p class="item" id="my-paper-0"></p>
</div>
<!-- /.item -->
<div class="item">
<h2>2. 角丸矩形を描く : rect()</h2>
<p class="item" id="my-paper-1"></p>
</div>
<!-- /.item -->
<div class="item">
<h2>3. 楕円を描く : ellipse()</h2>
<p class="item" id="my-paper-2"></p>
</div>
<!-- /.item -->
<div class="item">
<h2>4. 三角形を描く : path()</h2>
<p class="item" id="my-paper-3"></p>
</div>
<!-- /.item -->
<div class="item">
<h2>5. 矢印を描く : path()</h2>
<p class="item" id="my-paper-4"></p>
</div>
<!-- /.item -->
</div>
</div>
<!-- /#content -->
</div>
```
```body {
margin:0;
font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
}
margin-bottom:3em;
}
background-color:#234;
color:#fff;
margin:0;