Холст HTML5 - разные штрихи

Мне нужно нарисовать график с 3 разными линиями. Линейный график.

Я пробовал сделать так:

function draw() 
{  
    var canvas = document.getElementById("canvas");  
    var ctx = canvas.getContext("2d");      
    ctx.lineWidth=10;

    ctx.strokeStyle="teal";
    ctx.moveTo(10,CompanyA[0]);
    ctx.lineTo(110,CompanyA[1]);
    ctx.lineTo(210,CompanyA[2]);
    ctx.stroke();


    ctx.strokeStyle="green";
    ctx.moveTo(10,CompanyB[0]);
    ctx.lineTo(110,CompanyB[1]);
    ctx.lineTo(210,CompanyB[2]);
    ctx.stroke();       

    ctx.strokeStyle="yellow";
    ctx.moveTo(10,CompanyC[0]);
    ctx.lineTo(110,CompanyC[1]);
    ctx.lineTo(210,CompanyC[2]);
    ctx.stroke();
}

Но, видимо, последний штрих рисует все линии. Таким образом, я получаю 3 желтые линии вместо бирюзовой, зеленой и желтой. Я попытался создать три разных контекста (ctx1, ctx2 и ctx3), но по какой-то причине все они были нарисованы с помощью вызова ctx3.stroke ().

Как правильно это сделать?