0

Making a meme generator:

http://codepen.io/Teeke/pen/yJEaRY

The fonts are ragged on larger pictures. Any CSS font smoothing properties I use are rendered in the browser only, and do not save to the exported jpeg.

Font Styling is 58-63 in the JS:

ctxt.shadowColor = '#000';
ctxt.shadowOffsetX = 0;
ctxt.shadowOffsetY = 2;
ctxt.shadowBlur = 3;
ctxt.lineWidth = 2;

Are there any libraries or workarounds I could use? Could I apply a very low opacity greyscale or similar filter to the whole canvas? Javascript does not have as many font smoothing properties as CSS.

RubyRube
  • 602
  • 5
  • 24
  • Here is an older discussion in stackoverflow: http://stackoverflow.com/questions/4550926/subpixel-anti-aliased-text-on-html5s-canvas-element. It looks like you can do a little work and implement font smoothing in canvas on your own. Which browser are you using? I tried out your meme generator and the text results did not look bad. – Matthew Kiefer Jul 27 '16 at 12:57
  • Thanks Matthew. Using Chrome, but would be good to work with IE + Firefox. I will check through that doc, fork the codepen and post it as an answer when I get time. An opaque canvas ctxt might be a good start: var ctx = canvas.getContext("2d", {alpha: false}) – RubyRube Jul 27 '16 at 13:53

0 Answers0