Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[with solution]: Problem with context.save () and context.restore () #50

Closed
tmarti opened this issue Oct 31, 2019 · 4 comments · Fixed by #52
Closed

[with solution]: Problem with context.save () and context.restore () #50

tmarti opened this issue Oct 31, 2019 · 4 comments · Fixed by #52
Assignees
Labels

Comments

@tmarti
Copy link

tmarti commented Oct 31, 2019

The problem

The jest-canvas-mock/CanvasRenderingContext2D class save and restore operations should behave in the same way as browser/CanvasRenderingContext2D but it doesn't.

If we execute the following code:

function _do (cont) {
    var tmp = [];
    
    cont.scale(0.5, 0.5);
    cont.save ();
    tmp.push (cont.getTransform ().m11);
    cont.scale (0.5, 0.5);
    tmp.push (cont.getTransform ().m11);
    cont.restore ();
    tmp.push (cont.getTransform ().m11);
    
    console.log (tmp);
}

var the_canvas = some real canvas;

console.log ("save/restore sequence for browser/CanvasRenderingContext2D")

_do (
    the_canvas.getContext('2d')
);

console.log ("save/restore sequence for jest-canvas-mock/CanvasRenderingContext2D")

_do (
    new CanvasRenderingContext2D (
        the_canvas
    )
);

We get the following output:

save/restore sequence for browser/CanvasRenderingContext2D
Array(3) [ 0.5, 0.25, 0.5 ]

save/restore sequence for jest-canvas-mock/CanvasRenderingContext2D
Array(3) [ 0.5, 0.25, 0.25 ]

Expected behaviour

The output for jest-canvas-mock/CanvasRenderingContext2D should be the same as browser/CanvasRenderingContext2D...

Array(3) [ 0.5, 0.25, 0.5 ]

... instead of...

Array(3) [ 0.5, 0.25, 0.25 ]

(notice the 0.25 intead of 0.5 as last element in the array)

@tmarti
Copy link
Author

tmarti commented Oct 31, 2019

The solution

There we go!

The line...

this._transformStack.push(this._transformStack[this._stackIndex]);

... needs to be changed to...

this._transformStack.push(this._transformStack[this._stackIndex].slice ());

(notice the .slice())

@tmarti tmarti changed the title Problem with context.save () and context.restore () [with solution]: Problem with context.save () and context.restore () Oct 31, 2019
@jtenner
Copy link
Collaborator

jtenner commented Oct 31, 2019

@tmarti Thank you so much for this catch. This is a really easy fix, and you can submit a pull request if you'd like.

@hustcc
Copy link
Owner

hustcc commented Nov 3, 2019

@tmarti Mock canvas when run unit test cases with jest. For more browser environment, you can use
jest-electron for real browser runtime.

@jtenner jtenner self-assigned this Nov 3, 2019
@jtenner
Copy link
Collaborator

jtenner commented Nov 3, 2019

I'm going to take care of this in a few days. Sorry for the wait.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants