hitting a javascript function (that has asynchronous behaviour) like this you want to be using a closure:
//im assuming contexts array is defined some where up here??
for (var i = 0; i < xArr.length; i++) {
var cDID = xArr[i];
//the following function will self execute on each loop
(function (c, d) {
//Insert your renderCanvas function body here
//but use variable c and d in this closure.
//The values you have passed into this closure
//are now 'fixed' in this scope and cannot
//be interfered with by subsequent iterations
})(contexts[i], cDID);
}});
Basically you are wrapping your function in another scope so that on the next iteration of the now async loop you cannot overwrite your local variables (i think this is the behaviour of variables being 'swapped' that you refer to)
this gives a good explanation of javascript closure, it can be a confusing subject! - How do JavaScript closures work?