undefined | Better HN

0 pointspavlov13y ago0 comments

I've been making a HTML5 animation app called Radi: http://radiapp.com

It's a free download. (Mac only, at least for now -- there's a rudimentary Windows port that I'm hoping to finish one day.)

Unlike Edge, Hype and the rest of the animator apps, Radi uses the HTML5 Canvas element for rendering. The other apps basically do element-level animation using JavaScript + CSS3, whereas Radi renders frames from scratch. This allows advanced features like content keyframes, smoothly scaled brush strokes, etc.

Radi also supports HTML5 Video and Audio elements; you can create video effects and realtime Canvas script layers; and there's a minimalist Markdown editor included for text content.

0 comments

3 comments · 2 top-level

panabee13y ago· 1 in thread

quick question: how are you able to let users render sharp lines on the canvas elem?

when we allow people to draw freehand on a HTML5 canvas, the lines invariably come out fuzzy at the edges -- not nearly as sharp as drawing lines on a native app. it's not terrible, but it is noticeable.

here is some sample code: http://jsfiddle.net/NWBV4/10/

would you mind sharing how you overcame this issue?

thanks!

pavlovOP13y ago

You probably need to offset the line coordinates by (0.5, 0.5).

This is because the Canvas path coords describe the center points through which the stroke will be painted. So a vertical black line drawn through the coordinate (100, 100) wirh line width of 1 will render so that its minimum x coord is 99.5 and maximum x is 100.5. Since most render targets are 1:1 mapped to actual display pixels with antialiasing, what you get is two pixels of 50% black. To get one pixel of 100% black, the coordinate should fall right in the middle of the display pixel, i.e. 100.5 in this example.

Hopefully that makes some sense (typed on a phone...)

coofluence13y ago

Thanks Pavlov, I am trying out Radi.

j / k navigate · click thread line to collapse