Записи от одного фиксированного холста на другой плавучий

Question

У меня есть imageCanvas с его матрицей преобразования

Image = new image(); 
image.src = //stuff; 
imageContext.drawImage(Image, 0, 0); 
var t = imageContext.currentTransform; 

, что нарисовано на другой холст

context.drawImage(imageCanvas, 0, 0); 

, на котором я рисую линию

context.moveTo(mousePos.X, mousePos.Y); 
context.lineTo(currentPos.X, currentPos.Y); 
context.stroke(); 

Я сохраняю свои строки в векторе линий объектов. Я хотел бы присоединиться к двум слоям в «Изображение», но эта функция работает только для traslation, но не для вращения и масштабирования.

var saveCanvas = document.createElement('canvas'); 
var saveContext = saveCanvas.getContext('2d'); 

saveCanvas.width = Image.width; 
saveCanvas.height = Image.height; 

saveContext.drawImage(Image,0,0); 

saveContext.save(); 
var t = imageContext.currentTransform; 
saveContext.setTransform(1,0,0,1,-t.e,-t.f); 

for(var i = 0; i < lines.length; i++){ 
    saveContext.beginPath(); 
    saveContext.moveTo(lines[i].from.X, lines[i].from.Y); 
    saveContext.lineTo(lines[i].to.X, lines[i].to.Y); 
    saveContext.stroke(); 
} 
saveContext.restore(); 

Image.src = saveCanvas.toDataURL(); 

Как изменить аргументы 'setTransform' для решения проблемы?

Answer 1

Просто используйте остальные атрибуты transforms.

var t = imageContext.currentTransform; 
saveContext.setTransform(
    t.a, 
    t.b, 
    t.c, 
    t.d, 
    -t.e, 
    -t.f);