RHCode

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!

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)