Test Canvas

by Johnny Lee

HTML

<h1>1. Canvas Version</h1>
<canvas id="canvas" width="200px" height="200px" style="border:1px solid">
</canvas><br/>
- Works on Chrome, IE9 and FireFox.

<h1>2. SVG Version</h1>
<div id="canvas1" style="border:1px solid; width:200px; height:200px;">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <ellipse id="ellipse1" cx="100" cy="100" rx="37" ry="90" 
        fill="none" stroke="#000" stroke-width="2"/>
    <ellipse id="ellipse2" cx="100" cy="100" rx="37" ry="90" 
        fill="none" stroke="#000" stroke-width="2"/>
    <ellipse id="ellipse3" cx="100" cy="100" rx="37" ry="90" 
        fill="none" stroke="#000" stroke-width="2"/>
    <circle cx="100" cy="100" r="10" stroke="#000" 
       stroke-width="5" fill="#000"/>
</svg>
</div>    
- Works on Chrome only.

CSS

body {
    font-family: Verdana, Arial;
}
h1 {
    color: blue;
    font-weight: bold;
    font-size: 1.6em;
    margin: 1em 3px 1em 3px;
    border-bottom: solid 1px gray;
}
#ellipse2 {
    -ms-transform: rotate(60deg);
    -ms-transform-origin:100px 100px;
    -webkit-transform: rotate(60deg);
    -webkit-transform-origin:100px 100px;
    -moz-transform: rotate(60deg);
    -moz-transform-origin:100px 100px;
    transform: rotate(60deg);
    transform-origin:100px 100px;
}
#ellipse3 {
    -ms-transform: rotate(-60deg);
    -ms-transform-origin:100px 100px;
    -webkit-transform: rotate(-60deg);
    -webkit-transform-origin:100px 100px;
    -moz-transform: rotate(-60deg);
    -moz-transform-origin:100px 100px;
    transform: rotate(-60deg);
    transform-origin:100px 100px;
}

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

drawEllipse(.5,.5);
drawEllipse(.8,.8);
drawEllipse(.2,.2);
drawCenterCircle();

function drawEllipse(cos,sin) {
       var xCenter = 100;
       var yCenter = 100;
       var xPos, yPos;
       context.beginPath();
       for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
              xPos = xCenter - (35 * Math.sin(i)) * 
                Math.sin(sin * Math.PI) + (90 * Math.cos(i)) * 
                Math.cos(cos * Math.PI);
              yPos = yCenter + (90 * Math.cos(i)) * 
                 Math.sin(sin * Math.PI) + (35 * Math.sin(i)) * 
                 Math.cos(cos * Math.PI);
              if (i == 0) {
                     context.moveTo(xPos, yPos);
              } else {
                     context.lineTo(xPos, yPos);
              }
       }
       context.lineWidth = 2;
       context.strokeStyle = "#000";
       context.stroke();
       context.closePath();
}

function drawCenterCircle() {
       context.beginPath();
       context.arc(100, 100, 10, 0, 2 * Math.PI, false);
       context.fillStyle = "#000";
       context.fill();
       context.lineWidth = 5;
       context.strokeStyle = "#000";
       context.stroke();
}