jQuery Canvas Mail Examples

Style	Notes	Standard Email	Canvas Mail
Plain Text	Plain or colored text is rendered fine by Canvas Mail.	[email protected]	Email protected with javascript. Enable it to continue.
Default Link	jQuery can't detect "default" link style, so the link color and underline needs to be set / normalized or it won't get mimicked.	[email protected]	Email protected with javascript. Enable it to continue
Normalized Link	Canvas elements don't support underlining text, so the underline has to be done manually making it different than the standard font renderer.	[email protected]	Email protected with javascript. Enable it to continue.
Font Styled	All font modifications are supported by canvas, and so any addition font styling will be transferred to the canvas.	[email protected]	Email protected with javascript. Enable it to continue.
Transform	Text transform capitalize has to be slightly mimicked. The results might not match css, but it should be close (and east to modify).	[email protected]	Email protected with javascript. Enable it to continue.
Shadow	Shadows exist for canvas, but the appearance didn't seem to match how css was displaying them, and the extra math to account for the offset made this harder to support fully. Sorry.	[email protected]	Email protected with javascript. Enable it to continue.
Email Parameters	Email parameters like subject, body, cc, and bcc can also be included. cc and bcc are obscured slightly.	[email protected]	Email protected with javascript. Enable it to continue
Pseudo Selector	Canvas Mail does it's best to monitor pseudo-selectors and regenerate the canvas (hover over the links).	[email protected]	Email protected with javascript. Enable it to continue
WebFont	Webfonts work too, but the call to canvas mail needs to be made after the font is loaded, otherwise Canvas Mail will pick up the computed fallback font.	[email protected]	Email protected with javascript. Enable it to continue
Link Only	Canvas mail can also be used to make links without rendering the email on a canvas. Just use link-mail instead of canvas-mail.	No Email	No Email

Notes

1. Because the email is rendered on a canvas, it doesn't scale well then the screen is zoomed.
2. Some text styling is mimicked, not natively supported, so the appearance doesn't always match css styled text (see below).
3. Because the href element is only set on mouseover, Canvas Mail links can't be navigated to via tabbing.
4. The email will exist in contiguous memory on the client side at various points of computation, and for links, will exist in the DOM during mouseover