JS - Холст - нарисовать на двух холстах одновременно - подавать два вара?

Question

У меня вопрос. Как новобранец, я нашел хороший сценарий и переписал его к моему удовлетворению. Но я задаюсь вопросом, могу ли я сделать следующее более эффективное использование памяти/производительности.

Прежде всего немного фона.

• Я сделал холст, на котором я рисую линию с помощью мыши. Довольно простой.
• С помощью "canvas2svg" я смог скопировать копию холста на выход/загрузку svg.

Вопрос:

Теперь это все работает. Но мне было интересно, могу ли я сделать следующий фрагмент кода более эффективным для работы с памятью/эффективностью.

«ctx» var рисует на холсте «rttSvg» var рисует файл svg.

points.push({ x: e.clientX, y: e.clientY }); 

    ctx.beginPath(); 
    ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y); 
    ctx.lineTo(points[points.length - 1].x, points[points.length - 1].y); 
    ctx.stroke(); 

    rttSvg.beginPath(); 
    rttSvg.moveTo(points[points.length - 2].x, points[points.length - 2].y); 
    rttSvg.lineTo(points[points.length - 1].x, points[points.length - 1].y); 
    rttSvg.stroke(); 

Можно ли это объединить? Что-то вроде этого? (Новобранец Варинг вперед :)

(ctx.rttSvg).beginPath(); 

Мысли Для небольшого кусочка, как это я могу, конечно, создать функцию, передать оба ВАР и выполнить. Но чем мне придется делать много и много функций, так как мне придется делать это для всего кода, который взаимодействует с холстом и svg. И я хотел бы сделать это inline.

Как вы можете видеть, мне все равно придется обернуть голову вокруг процесса мышления JS. :)

Answer 1

Без больше контекста трудно быть 100% уверены, что это правильный подход, но вы можете обернуть чертеж в функции и просто вызвать эту функцию, принимая контекст рисования в качестве параметра ...

function drawStuff(context) { 
    context.beginPath(); 
    context.moveTo(points[points.length - 2].x, points[points.length - 2].y); 
    context.lineTo(points[points.length - 1].x, points[points.length - 1].y); 
    context.stroke(); 
} 

затем в случае необходимости ...

points.push({ x: e.clientX, y: e.clientY }); 

drawStuff(ctx); 
drawStuff(rttSvg);