<!DOCTYPE html>
<html>
<head lang="ru">
<meta charset="utf-8">
<meta name="author" content="Anastasia  Fedorova">
<title>Рисуем круги</title>
<link rel="stylesheet" href="style.css" media="all" />
<!--[if lte IE 8]><script type="text/javascript" src="ExplorerCanvas-master/excanvas.js"></script><![endif]-->
<script type="text/javascript">
function init() {
var f_canvas = document.getElementById("first");
var f_context = f_canvas.getContext("2d");
f_canvas.width =  550;
f_canvas.height = window.screen.height-350; 
 
DrawCircle(f_canvas.width/2,100,60,"#5C8BFF","#B9C7FF");
DrawCircle(f_canvas.width/2,260,100,"#6666CC","#6699FF");
DrawCircle(f_canvas.width/2,510,150,"#000099","#0033FF");
DrawCircle(f_canvas.width/2-25,85,6,"#000","#000");
DrawCircle(f_canvas.width/2+25,85,6,"#000","#000");
DrawCircle(f_canvas.width/2,100,10,"#f00","#f00");
DrawArc(f_canvas.width/2, 120, 30, "#000", Math.PI, 0)

function DrawCircle(x, y, r, scolor, fcolor) {
f_context.strokeStyle = scolor;
f_context.fillStyle = fcolor;
f_context.beginPath();
f_context.arc(x, y, r, 0, Math.PI * 2, true);
f_context.closePath();
f_context.stroke();
f_context.fill();
}
function DrawArc(x, y, r, scolor, sarc, farc) {
f_context.strokeStyle = scolor;
f_context.beginPath();
f_context.arc(x, y, r, sarc, farc, true);
f_context.closePath();
f_context.stroke();
}

}
</script>

</head>
<body onload="init()">
<h1>HTML 5 + CSS 3 + javascript</h1>
<p style="text-align: center">Рисунок можно сохранить в графическом формате, щелкнув по нему правой кнопкой мыши.</p>
<div id="canvas-block">
<canvas id="first">
</canvas>

</div>
</html>