OOP - face

#canvas1, #canvas2 { position: absolute; left: 20px; }

#canvas1 { z-index: 4; background-color: #9CF; top: 10px; }

#canvas2 { z-index: 2; background-color: #9FC; top: 320px; }

</style>

var canvas1;
var context1;

var canvas2;
var context2;

var face1 = new face(300,200,100);

var face2 = new face(100,200,50);

var face3 = new face(300,100,75);

var face4 = new face(40,40,20);

function face(x,y,r) {

this.x = x,
this.y = y,
this.r = r;

return (this.x, this.y, this.r);

}

function init() {

canvas1 = document.getElementById("canvas1");
context1 = canvas1.getContext("2d");

canvas2 = document.getElementById("canvas2");
context2 = canvas2.getContext("2d");

create(face1, context1);

create(face2, context2);

create(face3, context1);

create(face4, context2);
}

function create(f,ctx) {

ctx.fillStyle = "rgba(255,255,0,0.7)";
ctx.strokeStyle = "rgba(255, 0,255,0.7)";
ctx.lineWidth = 5;

ctx.beginPath();
ctx.arc(f.x,f.y,f.r,0, Math.PI *2, true);
ctx.fill();
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.arc(f.x-f.r*2/5,f.y-f.r*2/5,f.r/5,0, Math.PI *2, true);
ctx.fill();
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.arc(f.x+f.r*2/5,f.y-f.r*2/5,f.r/5,0, Math.PI *2, true);
ctx.fill();
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.arc(f.x,f.y,f.r*2/3,0, Math.PI, false);
ctx.fill();
ctx.closePath();
ctx.stroke();

}

</script>
</head>