/    Sign up×
Community /Pin to ProfileBookmark

does it make sense to use text in canvas?

Copy linkTweet thisAlerts:
Sep 21.2010

After toying around for a while with the <canvas> object in HTML5 I came to the disilluding conclusion that text won’t render the same smooth way as HTML5 text. Have a look for yourself. The more you magnify the view the more the difference becomes evident:

[URL=”http://kmt.hku.nl/~walther/test/test2.html”]http://kmt.hku.nl/~walther/test/test2.html[/URL]

Before giving up on this project, a last round of questions: is there any way to achieve the same rendering of text on a canvas than with plain HTML?

Thanks for your input,

Walt

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@rnd_meSep 21.2010 — just put the text, with a transparent background, in front of the canvas.

if you do use the canvas you should draw the text bigger in the first place, rather than scaling a raster.
Copy linkTweet thisAlerts:
@wstuhlmaauthorSep 21.2010 — Thanks. That helps. I'll give it some thoughts.

Walt
Copy linkTweet thisAlerts:
@wstuhlmaauthorSep 22.2010 — you should draw the text bigger[/QUOTE]

Maybe you - or somebody else - could shed some light on this one: how can you draw text 'bigger' if you want it to appear at a certain size? Did you mean to draw it bigger and then somehow reduce it in size like you can do with bitmap images?

If I understand it right, canvas gets its pixel information from the default font size and treats the glyphs from that moment on as just bitmap image (at a low res), whereas HTML enlarges the true type fonts to the demanded size and represents it only in the last moment as screen pixels. If this is (kind of) the case, then the question would be how to persuade canvas to get the pixel information from a (much) larger font size than the default one.

Hope somebody can contribute to that,

Walt
Copy linkTweet thisAlerts:
@rnd_meSep 25.2010 — Maybe you - or somebody else - could shed some light on this one: how can you draw text 'bigger' if you want it to appear at a certain size? Did you mean to draw it bigger and then somehow reduce it in size like you can do with bitmap images?[/QUOTE]

i meant that if i were drawing text into a 100X100 canvas and scaling it to fit a 200X200 div, i would be better off drawing a font twice as big onto a 200X200 canvas, not scaling at all.
Copy linkTweet thisAlerts:
@JonaSep 26.2010 — After toying around for a while with the <canvas> object in HTML5 I came to the disilluding conclusion that text won't render the same smooth way as HTML5 text. Have a look for yourself. The more you magnify the view the more the difference becomes evident:

http://kmt.hku.nl/~walther/test/test2.html

Before giving up on this project, a last round of questions: is there any way to achieve the same rendering of text on a canvas than with plain HTML?

Thanks for your input,

Walt[/QUOTE]

[font=arial]Hi,

I assume you're using Firefox. Try taking a look in Safari or Chrome. The text on those browsers seems to be smoother. It seems that using[/font][font=monaco]strokeText[/font][font=arial] smooths the font out in Firefox, however it does make the text a little bolder as well. YMMV. You could force the problem to be resolved with some fairly complicated detection scripting, but I'm thinking there may be some sort of anti-aliasing method or property that we don't know about.[/font]
×

Success!

Help @wstuhlma spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...