Canvas: performance and createRadialGradient

Question

Canvas

Hello,
example: we
limit the canvas to a hexagon , add a gradient , draw an area bounded by a Bezier curve, everything seems to be simple, but in IE + FF this code runs 10-20 times slower than in Chrome. Is there any way to optimize this? The buffer does not seem to fit, because. many colors + the figure needs to be “twisted” RadialGradient: if one of the gradient radii goes beyond the canvas, then the FF and IE gradient is not drawn at all. can this be bypassed somehow? example here: dino.fornax.uberspace.de/test/
ctx.save();
ctx.translate(x+2*heightX,y);
ctx.beginPath();
ctx.moveTo(0-2*heightX,0);
ctx.lineTo(0-heightX,0-heightY);
ctx.lineTo(heightX,0-heightY);
ctx.lineTo(2*heightX,0);
ctx.lineTo(heightX,heightY);
ctx.lineTo(0-heightX,heightY);
ctx.closePath();
ctx.clip();

var gr = ctx.createRadialGradient(0,heightY,15,0,0,25);
gr.addColorStop(0.0,'#0F0');
gr.addColorStop(1.0,'#0DA805');
ctx.fillStyle = gr;

ctx.moveTo(0-heightX,0+heightY);
ctx.bezierCurveTo((0-heightX)-f3,(0+heightY)-f4,heightX+f3,(0+heightY)-f4,heightX,0+heightY);
ctx.closePath();

ctx.fill();


Answer 1

The problem is very simple - if the inner circle intersects or goes beyond the outer circle, Firefox starts to work incorrectly.
Center of the inner circle at 64-64 - still working
Center of the inner circle at 65-65 - no longer working
You can solve the problem using the example of the bottom circle: libcanvas.github.com/ui/gradients.html (sip it in Chrome and Fox). Most likely it's a bug.
The solution is not to go beyond the outer circle with the inner circle.

Answer 2

The buffer can also be rotated) Many colors - do you mean that there will be many colors or many colors now? The gradient is generally a costly operation. So think about caching. I highly doubt you'll be able to do anything without it. And immediately solve the problem with "if one of the gradient radii goes beyond the boundaries of the canvas"

Answer 3

I'm starting to get a little crazy... I
tried to take Artyom's advice and draw a simple gradient image as a template.
Code: to be, one can imagine. and here is what our browsers draw: dino.fornax.uberspace.de/test/index3.html somewhere here is an elementary error, but I don’t see it point-blank…
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100,0);
ctx.lineTo(100,100);
ctx.lineTo(0,100);
ctx.lineTo(0,0);
ctx.closePath();
var gr = ctx.createRadialGradient(75,75,20,50,50,40);
gr.addColorStop(0.0,'#0F0');
gr.addColorStop(1.0,'#0DA805');
ctx.fillStyle = gr;
ctx.fill();


Answer 4

I think it's all about browsers. Just have to wait for a new version of IE. And FireLis the fifth has already been released, test it in it.

Answer 5

Testbench: jsfiddle.net/8H24M/

Answer 6

Obviously, browsers are blown away when the circles that define the gradient intersect.
Whether this is a bug in browsers or a bug in the Canvas specification that allows such ambiguities is a philosophical question.