Canvas advanced drawing techniques performance issues

[erisvaldojunior]

Hi there,

I'm exploring possibilities for custom brushes, patterns and etc with GCanvas. I'm basically following http://perfectionkills.com/exploring-canvas-drawing-techniques/ and doing comparisons with HTML Canvas (basically we intend to use GCanvas for mobile client and HTML Canvas for web client).

So far so good for most use cases but some really struggle performance wise on GCanvas (even on release mode): Shapes (like Stars), Spray and patterns for example (regarding patterns, is there an optimal way to create a Canvas object to pass as an parameter for createPattern function)? Any thoughts on how to improve performance for those examples that don't work well?

PS: one minor thing I found doing those examples is that hsl(degree, percentage, percentage) doesn't work for strokeStyle on react-native-gcanvas, so I had to convert it to RGB instead. I could make a PR for that if you think this should be done by react-native-gcanvas.

[flyskywhy]

Hi there,

I'm exploring possibilities for custom brushes, patterns and etc with GCanvas. I'm basically following http://perfectionkills.com/exploring-canvas-drawing-techniques/ and doing comparisons with HTML Canvas (basically we intend to use GCanvas for mobile client and HTML Canvas for web client).

So far so good for most use cases but some really struggle performance wise on GCanvas (even on release mode): Shapes (like Stars), Spray and patterns for example (regarding patterns, is there an optimal way to create a Canvas object to pass as an parameter for createPattern function)? Any thoughts on how to improve performance for those examples that don't work well?

If you have performance issue on iOS, please upgrade to @flyskywhy/react-native-gcanvas@2.3.7 first.

performance issue on Shapes: the root cause is bug in http://perfectionkills.com/exploring-canvas-drawing-techniques , e.g. Shapes with rotation, you can increase the performance by replace

  points.push({ x: e.clientX, y: e.clientY, angle: getRandomInt(0, 180) });

  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  for (var i = 0; i < points.length; i++) {
    drawStar(points[i].x, points[i].y, points[i].angle);
  }

with

  drawStar(e.clientX, e.clientY, getRandomInt(0, 180));

performance issue on Spray: no problem on Android, and please upgrade to @flyskywhy/react-native-gcanvas@2.3.7 on iOS

performance issue on patterns: Canvas object createPattern maybe need a PR 😝

PS: one minor thing I found doing those examples is that hsl(degree, percentage, percentage) doesn't work for strokeStyle on react-native-gcanvas, so I had to convert it to RGB instead. I could make a PR for that if you think this should be done by react-native-gcanvas.

hsl PR with an demo source code is best.