Drawing Complex Outlines

How hard is it to programmatically draw the spider below, outlined and filled with different colors

Using a simple trick, it's very easy. To draw the entire outline and fill the resulting shape would be difficult, but that is not at all how we are going to do this! The trick is not to draw a line tracing the spider's outline, but rather to just draw the spider twice using simple line segments.

First, draw a solid black circle, and the 8 line segments for the legs in with thick solid black lines

//draw a thick black spider
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
ctx.lineCap = "butt";
ctx.lineJoin = "round";
ctx.lineWidth = 9;
//body
ctx.arc(60,50,14,0,Math.PI*2,1);
ctx.fill();	
//top left leg
ctx.moveTo(60,50);
ctx.lineTo(7,15);
ctx.lineTo(7,65);
ctx.stroke();
//bottom left leg
ctx.moveTo(60,52);
ctx.lineTo(20,40);
ctx.lineTo(20,85);
ctx.stroke();
//top right leg
ctx.moveTo(60,50);
ctx.lineTo(113,15);
ctx.lineTo(113,65);
ctx.stroke();
//bottom right leg
ctx.moveTo(60,52);
ctx.lineTo(100,40);
ctx.lineTo(100,85);
ctx.stroke();

On top of this drawing, we repeat the exact same code used to draw the first spider, except this time we use white lines, the lines are 2px thinner than the lines used for the last spider, and the final segments of the legs are 1px shorter than before.

//draw a thin grey spider
ctx.beginPath();
ctx.strokeStyle = "#667fc4";
ctx.fillStyle = "#667fc4";
ctx.lineCap = "butt";
ctx.lineJoin = "round";
ctx.lineWidth = 5;
//body
ctx.arc(60,50,13,0,Math.PI*2,1);
ctx.fill();	
//top left leg
ctx.moveTo(60,50);
ctx.lineTo(7,15);
ctx.lineTo(7,63);
ctx.stroke();
//bottom left leg
ctx.moveTo(60,52);
ctx.lineTo(20,40);
ctx.lineTo(20,83);
ctx.stroke();
//top right leg
ctx.moveTo(60,50);
ctx.lineTo(113,15);
ctx.lineTo(113,63);
ctx.stroke();
//bottom right leg
ctx.moveTo(60,52);
ctx.lineTo(100,40);
ctx.lineTo(100,83);
ctx.stroke();

So the complete outlined spider is drawn by the combination of the two code snippets above.

//draw a thick black spider
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
ctx.lineCap = "butt";
ctx.lineJoin = "round";
ctx.lineWidth = 9;
ctx.arc(60,50,14,0,Math.PI*2,1);
ctx.fill();
ctx.moveTo(60,50);
ctx.lineTo(7,15);
ctx.lineTo(7,65);
ctx.stroke();
ctx.moveTo(60,52);
ctx.lineTo(20,40);
ctx.lineTo(20,85);
ctx.stroke();
ctx.moveTo(60,50);
ctx.lineTo(113,15);
ctx.lineTo(113,65);
ctx.stroke();
ctx.moveTo(60,52);
ctx.lineTo(100,40);
ctx.lineTo(100,85);
ctx.stroke();

//draw a thin grey spider
ctx.beginPath();
ctx.strokeStyle = "#667fc4";
ctx.fillStyle = "#667fc4";
ctx.lineCap = "butt";
ctx.lineJoin = "round";
ctx.lineWidth = 5;
ctx.arc(60,50,13,0,Math.PI*2,1);
ctx.fill();
ctx.moveTo(60,50);
ctx.lineTo(7,15);
ctx.lineTo(7,63);
ctx.stroke();
ctx.moveTo(60,52);
ctx.lineTo(20,40);
ctx.lineTo(20,83);
ctx.stroke();
ctx.moveTo(60,50);
ctx.lineTo(113,15);
ctx.lineTo(113,63);
ctx.stroke();
ctx.moveTo(60,52);
ctx.lineTo(100,40);
ctx.lineTo(100,83);
ctx.stroke();

This trick can be used to add an outline to any solid body drawn in canvas using line strokes.



`