<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:
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>