Как сдвинуть все действия холста в одной функции с помощью другой функции выборочно

Question

Рассмотрим следующий пример.

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, на значения в coordinates?

Мои Современные идеи и почему они не будут работать

1. Используйте метод перевода путем сохранения и восстановления контекста. Это ненадежно, потому что функция розыгрыша может включать сохранение и восстановление, а также конфликты.
2. Нарисуйте все в функции draw на отдельном холсте, а затем нарисуйте этот холст с помощью drawImage на желаемый холст с желаемыми переводами. Пример: draImage(canvas,coordinates.x,coordinates.y);. Это не работает, поскольку поскольку функция draw была создана в той же области, что и ctx, даже если ctx переопределено в render, оно все равно будет рисоваться с использованием оригинала ctx.
3. Включите функцию в строку и используйте регулярное выражение для смещения всех значений чертежа ... Очень непрактично.
4. Использование манипуляции с пикселями ... Это также приведет к перемещению вещей за пределы функции рисования, поэтому его необходимо отбросить.

Answer 1

Попробуйте оригинальную идею многократного сохранения/восстановления.

Состояние холста накладывается на стек с каждым context.save() и вызывается каждым context.restore().

Поэтому у вас не должно возникнуть проблемы с «вложением» сохранения/восстановления.

Answer 2

Вы можете создать переменную за рамки функций

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(); 
};