performance of hanzi-writer about hanzi-writer HOT 16 OPEN

It probably makes sense to polish the canvas PR and allow it to be enabled as a config option, something like { renderer: 'canvas' }. I'm worried about switching over fully since there are likely users relying on CSS to style the SVG output like in #87. I'll put together a PR adding the canvas renderer as a config option.

from hanzi-writer.

Another possible difference is using SVG clip-path instead of SVG mask to control the way the stroke looks while animating. I think clip-path should have better performance, but the reason I didn't switch to it fully is because using clip-path doesn't allow adding stroke width, and currently there's small gaps between overlapping strokes in the data from make me a hanzi (skishore/makemeahanzi#28). I want to try working on adding caps to the strokes from make me a hanzi when I have some time. If that issue can be resolved we can switch to using clip-paths for everything.

Could you try setting usePolygonMasks: true in Hanzi Writer? This uses clip-path instead of mask but does more work in javascript to try to calculate a wider clipping path to avoid the stroke gap issue. It might result in smoother animations if mobile is slow due to SVG performance.

from hanzi-writer.

Just seen in the code that Inkstone is using createjs which uses canvas and enable all WebGL niceties and use the GPU mostly.

from hanzi-writer.

oooh interesting I hadn't considered using canvas. That could be worth investigating - it would certainly have better performance than SVG, but probably requires a fair bit of extra work to translate the SVG path strings from Make me a Hanzi into canvas pixels.

from hanzi-writer.

setting usePolygonMasks to true didn't change anything on my test mobile phone.

from hanzi-writer.

A valuable comparison on SVG vs Canvas: https://www.sitepoint.com/canvas-vs-svg-choosing-the-right-tool-for-the-job/

from hanzi-writer.

I wouldn't be surprised if we could have most of both world by off-loading a lot to CSS animation that will be able to use hardware acceleration and keep SVG and crisp rendering. That would at least worth a try in my opinion.

from hanzi-writer.

I wonder if it's just that SVG performance isn't great on mobile. How do some of the SVG images from Make me a Hanzi look on mobile? They're using CSS to generate the animations: https://github.com/skishore/makemeahanzi/tree/master/svgs

from hanzi-writer.

Another possibility is that maybe having to calculate opacity for the highlight layer and the other hidden layers is straining on mobile. Maybe if we set display: none on elements after their opacity is 0 that might boost performance too?

from hanzi-writer.

The SVGs from makemeahanzi are not animated at all. I guess these CSS animation are not supported. I'll tinker a little more, but this is very possible that only a few CSS operations are supported... as I found out that CSS scale is not supported on my end. Android 4.4 is now fairly old, but I guess it is still an important target.

For the record, I tested in my app (a java based very simple app that only opens a webview on a provided index.html containing all the javascript) on my Galaxy Note 4 that I blocked on Android 4.4 . I basically added the svg as an <img src="">... (which perfectly plays the animation on my desktop Firefox) so I'll try other ways to include this svg to be sure.

from hanzi-writer.

Ah darn, it might be the case that SVG css animations aren't supported in older browsers. I think canvas should actually be pretty easy to implement though - it looks like there's a path element in canvas that can accept SVG path strings, and canvas supports clipping and transforms too. That should be everything we need for Hanzi Writer to work with canvas instead.

from hanzi-writer.

I made a proof-of-concept PR using canvas rendering here: #57. Does this perform better on your device? You'll need to build the dist files in that PR before testing. When I was testing in Chrome it appeared to have worse performance than using pure SVG, but it could be that Chrome has really optimized SVG rendering. It's also possible it needs more tweaking to optimize canvas rendering fully.

from hanzi-writer.

Hello @chanind

I used your POC on a heavy page, that I open Hanzi Writer as a popup.

For my page, the Canvas version had a huge performance impact.

I recorded 2 videos in the same page, to demonstrate it.

SVG Version:
https://youtu.be/4M7Lo2Gt7eE

Canvas Version:
https://youtu.be/QF2mwjMPw-k

Thank you for your work.

What do you think is missing on the Canvas version?

from hanzi-writer.

The Canvas version should work, but when I tested it using Chrome developer tools it didn't seem to perform as well as the SVG version. It could be that Chrome is just really optimized for SVG rendering. Which browser is that in the video? It looks like a webview on Android?

from hanzi-writer.

It's a PWA running on Google Chrome 70, Android 8.0, Moto Z2 Play

from hanzi-writer.

Great! Thank you!

I just found a bug on the Canvas version.

When you change the ideogram, it doesn't clean the previous ideogram loaded:

https://youtu.be/LYp-1yzM3Ms

To change, i'm using the setCharacter method.

That does't happen on the SVG version.

from hanzi-writer.