Smooth text edge with ImageMagick

Question

I'm using ImageMagick ver 6.9.3-7 to write text over pictures. I've noticed that the same text with the same font looks much better in html canvas and I'm trying to make it looks the same.

This is how it looks in the html5 canvas:

and this is how it's looks with IM:

(enlarge the images to view the different)

This is how I'm creating the image with node.js:

    gmFrame
        .font("./assets/impact.ttf", fontSize)
        .stroke("#000")
        .strokeWidth(8)
        .draw(`gravity center text ${position.x},${position.y} '${text}'`)
        .stroke("transparent")
        .fill("#fff")
        .draw(`gravity center text ${position.x},${position.y} '${text}'`);

Is there something to do about it?

score 1 · Answer 1 · answered Apr 16 '16 at 20:05

After investigating the only way to do it is with blur.

This is an example for how to add text with blur without writing another file

convert -quality 100 "DJ Pauly D.jpg" -resize 500x500 \( +clone -alpha transparent -pointsize 52 -font impact -stroke "#000" -strokewidth 8 -draw "gravity center text 0,0 'WRITE SOMETHING'" -stroke "transparent" -fill "#fff" -draw "gravity center text 0,0 'WRITE SOMETHING'" -blur 0x5 \) -composite r2.png

Smooth text edge with ImageMagick

1 Answers1