Javascript 如何有选择地将一个函数中的所有画布操作移动到另一个函数

考虑以下示例。

var ctx = document.createElement('canvas').getContext('2d');
function draw(){
    ctx.fillRect(10,10,10,10);
};
function render(){
    var coordinates = {x:100,y:200};
    draw();
};

问题

这就足够从画布的顶部和左侧绘制一个10像素的黑色矩形了。但是，如何指示程序将函数

draw

中绘制的所有内容按

坐标中的值移动

我当前的想法以及它们不起作用的原因

通过保存和恢复上下文来使用translate方法。这是不可靠的，因为draw函数可能还包括保存和恢复，它们可能会冲突
在单独的画布上绘制
Draw
函数中的所有内容，然后使用
drawImage
将该画布绘制到所需的画布上，并进行所需的翻译。示例：
draImage（画布，坐标.x，坐标.y）。这会失败，因为
draw
函数是在与
ctx
相同的范围内创建的，即使在
render
中重新定义了
ctx
，它仍将使用原始
ctx
进行绘制

将函数转换为字符串，并使用正则表达式移动所有图形值。。。非常不切实际
使用像素操作。。。这也会将东西移到draw函数之外，因此必须丢弃它
您可以在函数范围之外创建变量

var coordinates;

var ctx = document.createElement('canvas').getContext('2d');
function draw(){
//use the values
    ctx.fillRect(coordinates.x,coordinates.y,10,10);
};
function render(){
//set the values
    coordinates = {x:100,y:200};
    draw();
};

尝试您最初的多次保存/恢复想法

画布状态与每个context.save（）一起推送到堆栈上，并与每个context.restore（）一起弹出

因此，“嵌套”保存/还原应该没有问题。
不幸的是，这不是一个选项，因为绘图函数是用户提交的，我希望他们在该函数中指示的所有内容都可以移动，但程序需要移动。