JavaScript

Topic: Anything JavaScript, ECMAScript including Node, React, ...
Oct 28, 2017 00:28
I'm using opentype.js.org to start with....it's amazing, but slow because it draws paths
Oct 28, 2017 00:27
@William I've written a text selection library for canvas though. ;)
Oct 28, 2017 00:26
what's really cool though is that I account for screen scaling (browser zoom and retina display) so I can render pixel-perfect on any screen
Oct 28, 2017 00:25
don't get me started on "Dan" though. :-p
Oct 28, 2017 00:24
5.) I can then paint "Bob" onto another canvas "Cammy" which has my white background and other content. Cammy is the only canvas that actually renders to the screen
Oct 28, 2017 00:24
This creates the resulting effect of painted text
Oct 28, 2017 00:23
4.) I then set compositing to "source-in" on "Bob" and paint the area with a gradient like in the image above.
Oct 28, 2017 00:23
3.) I now have some text in white on a transparent background on "Bob"
Oct 28, 2017 00:22
2.) I draw the characters to make up words by drawing "Alice" canvas to, the resulting canvas, we'll call "Bob"
Oct 28, 2017 00:21
1.) I render each character at a defined size to a canvas per character (white text on a transparent background)
Oct 28, 2017 00:21
okay, let's walk through this:
Oct 28, 2017 00:19
which is white background
Oct 28, 2017 00:19
no, it composites to the displayed canvas in the end
Oct 28, 2017 00:19
sadly, still a lot faster than drawing paths
Oct 28, 2017 00:19
it's a multi-stage process
Oct 28, 2017 00:18
resulting content is rendered on a white background
Oct 28, 2017 00:17
Oct 28, 2017 00:17
of course
Oct 28, 2017 00:17
yes
Oct 28, 2017 00:16
hehe
Oct 28, 2017 00:15
result
Oct 28, 2017 00:13
I render the text in white, set source-in, then draw a rectangular area over the text block with the paint I want to use. This allows me to cache the characters once and then reuse them without having to "draw" them again via paths.
Oct 28, 2017 00:11
ah, I see
Oct 28, 2017 00:09
@KendallFrey which route did you take?
Oct 28, 2017 00:06
I'm writing a text rendering engine on canvas and I'm building a "bitmap font" type caching mechanism to improve the performance since drawing paths is MUCH slower than pixels. However, I'm trying to decide if the performance would be better drawing all characters to a large canvas or drawing each character to its own canvas (i'll be using drawImage and globalCompositeOperation = 'source-in' to splice characters). Does anyone have any feedback on this before I end up implementing both to test?
Jul 12, 2017 18:23
I'm getting out of memory errors in Chrome with my application if I do too many things too fast. Can someone tell me if the GC in Chrome just gets behind it will throw OoM errors if it can't catch up in time?