Sine, first version

src/ajdraw.js

@@ -137,16 +137,34 @@ AjDraw = function() {
 		return new Composite(newelements, this.style);
 	}
 
-	Composite.prototype.translate = function (move) {
+	Composite.prototype.resize = function (ratio) {
 		var newelements = [];
 
 		for (var n in this.elements)
-			newelements.push(this.elements[n].translate(move));
+			newelements.push(this.elements[n].resize(ratio));
+
+		return new Composite(newelements, this.style);
+	}
+
+	Composite.prototype.horizontalResize = function (ratio) {
+		var newelements = [];
 
+		for (var n in this.elements)
+			newelements.push(this.elements[n].horizontalResize(ratio));
+
 		return new Composite(newelements, this.style);
 	}
 
-	Composite.prototype.translateHorizontal = function (move) {
+	Composite.prototype.verticalResize = function (ratio) {
+		var newelements = [];
+
+		for (var n in this.elements)
+			newelements.push(this.elements[n].verticalResize(ratio));
+
+		return new Composite(newelements, this.style);
+	}
+
+	Composite.prototype.translate = function (move) {
 		var newelements = [];
 
 		for (var n in this.elements)
@@ -177,6 +195,26 @@ AjDraw = function() {
 	Triangle.prototype = new Composite();
 	Triangle.prototype.constructor = Triangle;
 
+	function Sine(from, to, step, style) {
+		var lines = [];
+		var points = [];
+
+		for (var x = from; x <= to; x += step)
+			points.push(new Point(x, Math.sin(x)));
+
+		for (var n = 0; n < points.length-2; n++)
+			lines.push(new Line(points[n], points[n+1]));
+
+		Composite.prototype.constructor.call(
+			this, 
+			lines,
+			style
+		);
+	}
+
+	Sine.prototype = new Composite();
+	Sine.prototype.constructor = Sine;
+
 	function Image(ctx) {
 		var lastx = -1;
 		var lasty = -1;
@@ -207,15 +245,18 @@ AjDraw = function() {
 		function endDraw(style) 
 		{
 			if (style != null) {
+				if (style.fillColor != null)
+					ctx.fillStyle = style.fillColor;
+
 				if (style.color != null)
-					if (style.fill)
-						ctx.fillStyle = style.color;
-					else
-						ctx.strokeStyle = style.color;
-				if (style.fill)
+					ctx.strokeStyle = style.color;
+
+				if (style.fillColor != null)
 					ctx.fill();
-				else
+
+				if (style.color != null)
 					ctx.stroke();
+
 				ctx.restore();
 			}
 		}
@@ -230,6 +271,7 @@ AjDraw = function() {
 		Line: Line,
 		Image: Image,
 		Composite: Composite,
-		Triangle: Triangle
+		Triangle: Triangle,
+		Sine: Sine
 	}
 }();

test/canvas.html

@@ -15,6 +15,15 @@ <h1>Using Canvas</h1>
         var ctx = canvas.getContext("2d");
 
 		ctx.lineWidth = 2;
+
+		ctx.fillStyle = "orange";
+		ctx.moveTo(300, 200);
+        ctx.lineTo(250, 300);
+
+        ctx.lineTo(350, 300);
+        ctx.lineTo(300, 200);		
+		ctx.stroke();
+		ctx.fill();
 
 		ctx.save();
 
@@ -27,7 +36,7 @@ <h1>Using Canvas</h1>
         ctx.lineTo(250, 300);
         ctx.lineTo(200, 200);		
 		ctx.stroke();
-		//ctx.fill();
+		ctx.fill();
 
 		ctx.restore();
 
@@ -72,10 +81,15 @@ <h1>Using Canvas</h1>
 		d.style.color = "orange";
 		d.rotate(90).translate(p(100, 100)).draw(image);
 
-		var t = new AjDraw.Triangle(p(300, 100), p(400, 200), p(400, 100), { color: "red", fill: true });
+		var t = new AjDraw.Triangle(p(300, 100), p(400, 200), p(400, 100), { fillColor: "red" });
 		t.draw(image);
-
-		ctx.stroke();
+
+		var s = new AjDraw.Sine(0, Math.PI*20, Math.PI/360, { color: "green" });
+		s = s.verticalResize(10);
+		s = s.horizontalResize(3);
+		s = s.translate(p(100, 100));
+
+		s.draw(image);
 	};
 
 	function p(x, y) {