CanvasGradient

[NuclearCookie]

Hello,

I find your tool very helpful for debugging canvas drawing commands for complex shapes. It would be even better if I could visualize gardients as well.

Do you know how to implement it? I tried to do it but I'm missing a lot of information.

Thanks in advance

[Rob--W]

A CanvasGradient is an opaque object, there is no way to directly serialize and unserialize it.

So to implement serialization, you have to intercept the methods that create a gradient, and keep track of the mutations on the object.

This is not as difficult as it sounds, to start with, see https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient To do so, hook CanvasRenderingContext2D.createLinearGradient and CanvasRenderingContext2D.createRadialGradient and store their parameters on the CanvasGradient instance. And hook instance methods such as addColorStop to record the construction of the gradient.

If you provide examples that use CanvasGradients (please try to provide relatively small examples, small in terms of canvas operations), then I can update the canvas-interceptor to support CanvasGradients - https://github.com/Rob--W/canvas-interceptor/blob/d83d47e95435d9b2bec75f4a20d3a38e50419262/canvas-interceptor.js#L227-L228

[NuclearCookie]

Hello Rob,

Thanks for the detailed reply. I'll look in to it!

On Jan 18, 2017 19:38, "Rob Wu" [email protected] wrote:

A CanvasGradient is an opaque object, there is no way to directly serialize and unserialize it.

So to implement serialization, you have to intercept the methods that create a gradient, and keep track of the mutations on the object.

This is not as difficult as it sounds, to start with, see https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient To do so, hook CanvasRenderingContext2D.createLinearGradient and CanvasRenderingContext2D.createRadialGradient and store their parameters on the CanvasGradient instance. And hook instance methods such as addColorStop to record the construction of the gradient.

If you provide examples that use CanvasGradients (please try to provide relatively small examples, small in terms of canvas operations), then I can update the canvas-interceptor to support CanvasGradients - https://github.com/Rob--W/canvas-interceptor/blob/ d83d47e95435d9b2bec75f4a20d3a38e50419262/canvas-interceptor.js#L227-L228

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Rob--W/canvas-interceptor/issues/1#issuecomment-273561641, or mute the thread https://github.com/notifications/unsubscribe-auth/AFG1om1bOwAekx7a6Wn4bmSfFoxHefrtks5rTlwfgaJpZM4LlbxH .