Fails to execute 'getImageData' on 'CanvasRenderingContext2D'

[bitshadow]

I got Uncaught TypeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The provided float value is non-finite. error while executing below snippet.

            var canvas = document.getElementById('canvas');
            canvas.width = 150;
            canvas.height = 150;

            var context = canvas.getContext('2d');
            context.font = "bold 70px Helvetica"
            context.textAlign = 'center'
            context.textBaseline = 'middle'
            context.lineWidth = 3;
            context.fillStyle = "rgb(0, 0, 0)";

            var gif = new GIF({
              workers: 2,
              quality: 10
            });

            gif.addFrame(context, {copy: true, delay: 200});

[jnordberg]

Odd, can you link a jsfiddle or similar where you can reproduce it?

[Terri5732]

/r/reddit issue? I seem to have "upset" the "higher powers" if you will for some odd reason. Non related to reddit rather Ello.com?? Wayback internet archive??? And of course Googlewemaster cache bla bla bla..I am a loyal Apple advocate; hence I'm using mobile e.g, IPad Air 2 and IPhone 6+ certain links, media Are censored, i'm certain you Know this Vk.com is Russian social media? Quite contrary to media of choice...I read the disclaimers, privacy, intellectual property, as well as Safe Harbor Act both versions, Freedom of Information Act, Digital millennium mobilization Act bla bla bla...Get My drift? Sorry, My apologies for digressing. I enjoy social media, love writing (literature, creative writing) that's my thing. I'm well-traveled, cultured, comical and Self deprecating but "Those" like to Challenge me?? I'm a Fan or Foe with social "Friends". As s female, I yearn for intelligent communications..they're out there they find me for certain or various links I'm pretty transparent, but ambiguious, I Prefer for various geographical "small town small mind". I welcome suggestions, Feedback etc. I was Hoping to create a repository (Outing ill minded, hackers, trolls, digital terrorists, anti-Progressives etc... And can use a Public Benefit Corporation as well, it's for a good "cause" Benefits there Are a plethora to Choose. Let me Know how I can help...no outer or external "influences" Trust that...you can take that to the "bank" ! No pun intended, well maybe a little! I'm ornery and like wine as aging it matures! So go figure ?

[anuragagarwal561994]

Hey @bitshadow since you are passing a context you should specify the width and the height of the canvas (according to this encoder) at the time of initializing the gif. If you will use gif.render() after adding your frame you will get this error message of adding width and height at the time of initialization.

[bitshadow]

It determines width and height from the first frame. https://github.com/jnordberg/gif.js/blob/master/src/gif.coffee#L12

Looks like the issue is here. https://github.com/jnordberg/gif.js/blob/master/src/gif.coffee#L48 AddFrame can have image and context as (image) param. Actual image can have width and height. But to get size from context we need to use canvas. ex. context.canvas.width && context.canvas.height.

[anuragagarwal561994]

yes I was about to submit that patch too, but to resolve your issue in the existing code you can specify the width and the height at the time of initialization till my patch doesn't get merged.

[fdandan]

@anuragagarwal561994 help me very well, thanks!