MorphSVG: Pass params to the render function

[shy_seagull]

Hi there,

I have multiple canvases in my project and all of them use the MorphSVGPlugin. For rendering to canvas I’m using this draw function:

function draw(rawPath, target) {  
  var l, segment, j, i;
  ctx.clearRect(0, 0, 5000, 5000);
  ctx.fillStyle = target.style.fill;
  ctx.beginPath();
  for (j = 0; j < rawPath.length; j++) {
    segment = rawPath[j];
    l = segment.length;
    ctx.moveTo(segment[0], segment[1]);
    for (i = 2; i < l; i+=6) {
      ctx.bezierCurveTo(segment[i], segment[i+1], segment[i+2], segment[i+3], segment[i+4], segment[i+5]);
    }
    if (segment.closed) {
      ctx.closePath();
    }
  }
  ctx.fill("nonzero");
}

Now that I have multiple ctx variables for the different canvases I would like to specify which ctx to use by passing 'heroCtx' for example to the render function as a parameter.

gsap.to(shape1, { morphSVG: {shape: path2, render: draw, updateTarget: false } })

What would be the best way to do that?

Thank you! 

[GreenSock]

If I understand you correctly, you want to define the context for each tween, right? So maybe just wrap it in a function that accepts the context as a parameter and spits back a draw function that uses that context: 

 

function getDraw(ctx) {
	return function draw(rawPath, target) {
		var l, segment, j, i;
		ctx.clearRect(0, 0, 5000, 5000);
		ctx.fillStyle = target.style.fill;
		ctx.beginPath();
		for (j = 0; j < rawPath.length; j++) {
			segment = rawPath[j];
			l = segment.length;
			ctx.moveTo(segment[0], segment[1]);
			for (i = 2; i < l; i+=6) {
				ctx.bezierCurveTo(segment[i], segment[i+1], segment[i+2], segment[i+3], segment[i+4], segment[i+5]);
			}
			if (segment.closed) {
				ctx.closePath();
			}
		}
		ctx.fill("nonzero");
	};
}

gsap.to(shape1, { ... render: getDraw(ctx1)});
gsap.to(shape2, { ... render: getDraw(ctx2)});
gsap.to(shape3, { ... render: getDraw(ctx3)});

Does that help?

[shy_seagull]

Thanks Jack, that solved it!