canvas test

HTML

<script src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<canvas id="cv" width="720" height="576" style="border: 1px solid red;"></canvas>
<br/>
<button onclick="draw()">draw</button>

JavaScript

function draw() {
    var cv = document.getElementById('cv');
    var ct = cv.getContext('2d');
    
    var w = cv.width;
    var h = cv.height;
    var r = 250.0;
    var area = Math.PI * r * r;
    
    ct.beginPath();
    ct.arc(w/2, h/2, r, 0, 2 * Math.PI, false);
    ct.lineWidth = 1;
    ct.strokeStyle = '#000000';
    ct.stroke();
    
    ct.beginPath();
    ct.arc(w/2, h/2, Math.sqrt(area / Math.PI / 2), 0, 2 * Math.PI, false);
    ct.lineWidth = 1;
    ct.strokeStyle = '#000000';
    ct.stroke();
    
    ct.beginPath();
    ct.arc(w/2, h/2, Math.sqrt(area / Math.PI / 4), 0, 2 * Math.PI, false);
    ct.lineWidth = 1;
    ct.strokeStyle = '#000000';
    ct.stroke();
    
    ct.beginPath();
    ct.arc(w/2, h/2, Math.sqrt(area / Math.PI / 8), 0, 2 * Math.PI, false);
    ct.lineWidth = 1;
    ct.strokeStyle = '#000000';
    ct.stroke();
    
    ct.beginPath();
    ct.arc(w/2, h/2, Math.sqrt(area / Math.PI / 16), 0, 2 * Math.PI, false);
    ct.lineWidth = 1;
    ct.strokeStyle = '#000000';
    ct.stroke();
    
    ct.beginPath();
    ct.arc(w/2, h/2, Math.sqrt(area / Math.PI / 32), 0, 2 * Math.PI, false);
    ct.lineWidth = 1;
    ct.strokeStyle = '#000000';
    ct.stroke();
    
    ct.beginPath();
    ct.arc(w/2, h/2, Math.sqrt(area / Math.PI / 64), 0, 2 * Math.PI, false);
    ct.lineWidth = 1;
    ct.strokeStyle = '#000000';
    ct.stroke();
}