var cnv = document.getElementById('canvas');
var ctx = cnv.getContext('2d');	
function drawFig(type, color, coordX, coordY, size, angle){
	if(type=="square"){
		
		size = size*4/5;
		ctx.save(); // сохраняем стейт контекста
		ctx.translate(coordX, coordY); //
		ctx.rotate(angle);
		ctx.fillStyle = color;
		ctx.fillRect(-size/2, -size/2, size, size);
		ctx.restore();
	}
	else if(type=="circle"){
		
		ctx.arc(coordX, coordY, size/2, 0, Math.PI*2, true);  
		ctx.fillStyle = color;
		ctx.fill();
	}
	else if(type=="ellipse"){
		
		ctx.save();
		ctx.translate(coordX, coordY);
		ctx.rotate(angle);
		ctx.scale(1, 2);
		ctx.arc(0, 0, size/3, 0, Math.PI*2);
		ctx.restore();
		ctx.fillStyle = color;
		ctx.fill();
	}
}
drawFig("circle", "blue", 150, 150, 20, 0.5);
drawFig("square", "green", 200, 150, 20, 0.5);
drawFig("ellipse", "pink", 250, 150, 20, 0.5); |