DrawCanvas drawComponentType(List<DrawComponentType> l) => (CanvasRenderingContext2D g, Entity e, area) {
 l.forEach((i) {
   if (e.getComponent(i.ct) != null) {
     i.draw(g, e, area);
   }
 });
};

DrawCanvas drawConstraints({pinStyle : "rgba(0,153,255,0.1)", distanceStyle : "#d8dde2", distanceStyleCollide : "#e2ddd8", angleStyle:"rgba(255,255,0,0.2)"}) => (CanvasRenderingContext2D g, Entity e, area) {
 var cs = e.getComponent(Constraints.CT) as Constraints;
 cs.l.forEach((x) {
   if (distanceStyle != null && x is Constraint_Distance)
     drawSegment(g, x.segment, distanceStyle, distanceStyleCollide);
   else if (pinStyle != null && x is Constraint_Pin)
     drawCPin(g, x, pinStyle);
   else if (angleStyle != null && x is Constraint_AngleXY)
     drawCAngle(g, x, angleStyle);
 });
};

drawCAngle(g, Constraint_AngleXY x, strokeStyle) {
 g.beginPath();
 g.moveTo(x.a.x, x.a.y);
 g.lineTo(x.b.x, x.b.y);
 g.lineTo(x.c.x, x.c.y);
 var tmp = g.lineWidth;
 g.lineWidth = 5;
 g.strokeStyle = strokeStyle;//;
 g.stroke();
 g.lineWidth = tmp;
}

drawCPin(g, Constraint_Pin x, fillStyle) {
 g.beginPath();
 g.arc(x.pin.x, x.pin.y, 6, 0, 2*math.PI);
 g.fillStyle = fillStyle;//;
 g.fill();
}

drawSegment(g, Segment x, strokeStyle, strokeStyleCollide) {
 var p1 = x.ps.position3d[x.i1];
 var p2 = x.ps.position3d[x.i2];
 g.beginPath();
 g.moveTo(p1.x, p1.y);
 g.lineTo(p2.x, p2.y);
 g.strokeStyle = (x.collide == -1) ? strokeStyleCollide : strokeStyle; //
 g.stroke();
}

/ area.x = radius.toDouble(); / area.y = radius.toDouble(); / area.x = radius.toDouble(); / area.y = radius.toDouble();

DrawCanvas particles(num radiusScale, {fillStyle, strokeStyle, strokeLineWidth : 1, strokeLineDashOffset : 0}){
 return (CanvasRenderingContext2D g, Entity entity, area) {
   var particle0s = entity.getComponent(Particles.CT) as Particles;
   if (particle0s == null || particle0s.position3d.isEmpty) return;
   for(var i = particle0s.length - 1; i > -1; --i){
     var pos = particle0s.position3d[i];
     if (pos != null) {
       var radius0 = particle0s.radius[i] * radiusScale;
       int color = particle0s.color[i];
       if (particle0s.collide[i] == -1) {
         color = hsl_irgba(hsl_complement(irgba_hsl(color)));
       }
       var fillStyle0 = irgba_rgbaString(color);
       //g.moveTo(pos.x, pos.y);
       g.beginPath();
       //print('${pos.x} // ${pos.y}');
       g.arc(pos.x, pos.y, radius0, 0, math.PI*2,true);
       g.closePath();
       if (fillStyle != null) {
         g.fillStyle = fillStyle0;
         g.fill();
       }
       if (strokeStyle != null) {
         g.strokeStyle = strokeStyle;
         g.lineWidth = strokeLineWidth;
         g.lineDashOffset = strokeLineDashOffset;
         g.stroke();
       }
     }
   }
   //TODO define the area
//    area.x = radius.toDouble();
//    area.y = radius.toDouble();
 };
}

DrawCanvas text(String txt, {fillStyle, strokeStyle, strokeLineWidth : 1, strokeLineDashOffset : 0, textAlign : null, font: null})  => (CanvasRenderingContext2D g, Entity e,area) {
 if (strokeStyle == null && fillStyle == null) return;
 //if (textAlign != null) g.textAlign = textAlign;
 if (fillStyle != null) {
   g.fillStyle = fillStyle;
   g.fillText(txt, 0, 0);
 }
 if (strokeStyle != null) {
   g.strokeStyle = strokeStyle;
   g.lineWidth = strokeLineWidth;
   g.lineDashOffset = strokeLineDashOffset;
   if (font != null) g.font = font;
   g.strokeText(txt, 0, 0);
 }
 //TODO var m = g.measureText(txt);
 //TODO area.x = m.width;
 //TODO area.y = m.h;
};

DrawCanvas disc(num radius, {fillStyle, strokeStyle, strokeLineWidth : 1, strokeLineDashOffset : 0})  => (CanvasRenderingContext2D g, Entity e, area) {
 if (strokeStyle == null && fillStyle == null) return;
 g.beginPath();
 g.arc(0, 0, radius,0, math.PI*2,true);
 g.closePath();
 if (fillStyle != null) {
   g.fillStyle = fillStyle;
   g.fill();
 }
 if (strokeStyle != null) {
   g.strokeStyle = strokeStyle;
   g.lineWidth = strokeLineWidth;
   g.lineDashOffset = strokeLineDashOffset;
   g.stroke();
 }
 area.x = radius.toDouble();
 area.y = radius.toDouble();
};

DrawCanvas dot4({fillStyle}) => (CanvasRenderingContext2D g, Entity e, area) {
 if (fillStyle != null) {
   g.fillStyle = fillStyle;
   g.fillRect(-2, -2, 4, 4);
   area.x = 4.0;
   area.y = 4.0;
 }
};

DrawCanvas rect(w, h, {fillStyle, strokeStyle, strokeLineWidth : 1, strokeLineDashOffset : 0}) => (CanvasRenderingContext2D g, Entity e, area) {
 if (strokeStyle == null && fillStyle == null) return;
 var rx = - w/2;
 var ry = - h/2;
 if (fillStyle != null) {
   g.fillStyle = fillStyle;
   g.fillRect(rx, ry, w, h);
 }
 if (strokeStyle != null) {
   g.strokeStyle = strokeStyle;
   g.lineWidth = strokeLineWidth;
   g.lineDashOffset = strokeLineDashOffset;
   g.strokeRect(rx, ry, w, h);
 }
 area.x = w.toDouble();
 area.y = h.toDouble();
};