绘制图像轮廓的最佳实践

Question

I've tried 3 ways to make it, but the effect doesn't looks well.

1. copy and fill image then make offset. The demo is

 var ctx = canvas.getContext('2d'), img = new Image; img.onload = draw; img.src = "http://i.stack.imgur.com/UFBxY.png"; function draw() { var dArr = [-1,-1, 0,-1, 1,-1, -1,0, 1,0, -1,1, 0,1, 1,1], // offset array s = 20, // thickness scale i = 0, // iterator x = 5, // final position y = 5; // draw images at offsets from the array scaled by s for(; i < dArr.length; i += 2) ctx.drawImage(img, x + dArr[i]*s, y + dArr[i+1]*s); // fill with color ctx.globalCompositeOperation = "source-in"; ctx.fillStyle = "red"; ctx.fillRect(0,0,canvas.width, canvas.height); // draw original image in normal mode ctx.globalCompositeOperation = "source-over"; ctx.drawImage(img, x, y); } 

 <canvas id=canvas width=500 height=500></canvas> 

. When the outline width is large, the outline result will be wrong.

2. check the edge of image base on the Marching Squares algorithm. When the image shape is circle, the outline is with sawtooth. If make the outline more smoother, it won't fit the sharp shape like star.

3. copy and fill the image then scale it. When a image width is not equal with height, it doesn't work.

Answer 1

You can try with a math approach, without the offset array

 var ctx = canvas.getContext('2d'), img = new Image; img.onload = draw; img.src = "http://i.stack.imgur.com/UFBxY.png"; function draw() { var s = 20, // thickness scale x = 5, // final position y = 5; for (i=0; i < 360; i++) ctx.drawImage(img, x + Math.sin(i) * s, y + Math.cos(i) * s); // fill with color ctx.globalCompositeOperation = "source-in"; ctx.fillStyle = "red"; ctx.fillRect(0, 0, canvas.width, canvas.height); // draw original image in normal mode ctx.globalCompositeOperation = "source-over"; ctx.drawImage(img, x, y); } 

 <canvas id=canvas width=500 height=500></canvas> 

My idea comes from the way we draw a circle using a string:
https://www.wikihow.com/Draw-a-Perfect-Circle-Using-a-Pin

Imagine that instead of a pencil at the end of the string we just have a shape

---

Here is a visual comparison of my approach and yours, also I'm showing a third approach scaling the image, there is really not a best one, it's just a matter of personal preference.

You could create a hybrid mode, if the hairline is important to you, get that portion of the image scaling it, then use a different way for the rest of the body.