Sets the default function that should be called whenever a morphSVG tween updates. This is useful if you're rendering to <canvas>
.
Video explanation
Demo: MorphSVG canvas rendering
Here's an example of a tween and a render function that'd draw the morphing shape to canvas:
var canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d"), vw = canvas.width = window.innerWidth, vh = canvas.height = window.innerHeight; ctx.fillStyle = "#ccc"; MorphSVGPlugin.defaultRender = draw; TweenMax.to("#hippo", 2, {morphSVG:"#circle"}); function draw(rawPath, target) { var l, segment, j, i; ctx.clearRect(0, 0, vw, vh); 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("evenodd"); }