Jump to content

Stop effects of translate() function


RHCode
 Share

Recommended Posts

In javascript, there is a 

translate(x,y);

function. If I wanted to have a rect translated, but another rect below it not, how could I do that. In processing, they have a resetMatrix(); function. For example:

ctx.translate(100,100); // Translate function
ctx.fillRect(0,0,100,100); // Apply translate effects onto this (translate the rect to 100,100)

//Don't want to translate this
ctx.fillRect(100,100,50,50); // want it to stay at (100,100), not be translated to (200,200)

 

Link to comment
Share on other sites

The save() and restore() methods are useful for that. save() remembers the current state, restore brings back the state of the last save() call.

ctx.save(); // Remember the current state

ctx.translate(100,100);
ctx.fillRect(0,0,100,100);

ctx.restore(); // Return to the previous state

ctx.fillRect(100,100,50,50);

 

  • Like 1
Link to comment
Share on other sites

20 hours ago, Ingolme said:

The save() and restore() methods are useful for that. save() remembers the current state, restore brings back the state of the last save() call.


ctx.save(); // Remember the current state

ctx.translate(100,100);
ctx.fillRect(0,0,100,100);

ctx.restore(); // Return to the previous state

ctx.fillRect(100,100,50,50);

 

Thanks so much!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...