canvas 有多个一样的圆形，怎么精简javascript

Question

<canvas id="myCanvas1" class="roundness" width="300" height="300"></canvas>
<canvas id="myCanvas2" class="roundness" width="300" height="300"></canvas>
<canvas id="myCanvas3" class="roundness" width="300" height="300"></canvas>

<script>
    
    var context1=document.getElementById("myCanvas1");
    var context2=document.getElementById("myCanvas2");
    var context3=document.getElementById("myCanvas3");
    var ctx1=context1.getContext("2d");
    var ctx2=context2.getContext("2d");
    var ctx3=context3.getContext("2d");
    ctx1.lineWidth = 2;//线条的宽度
    ctx2.lineWidth = 2;//线条的宽度
    ctx3.lineWidth = 2;//线条的宽度
    ctx1.strokeStyle = "#b81113";//线条的颜色
    ctx2.strokeStyle = "#b81113";//线条的颜色
    ctx3.strokeStyle = "#b81113";//线条的颜色
    ctx1.beginPath();
    ctx2.beginPath();
    ctx3.beginPath();
    ctx1.arc(100,100,94,1.4*Math.PI,1*Math.PI);
    ctx2.arc(100,100,94,1.4*Math.PI,1*Math.PI);
    ctx3.arc(100,100,94,1.4*Math.PI,1*Math.PI);
    ctx1.stroke();
    ctx2.stroke();
    ctx3.stroke();

</script> 

三个圆形都是一样的，怎么精简？ 各位小哥哥小姐姐求指教

Answer 1

function drawArc(id){
var context=document.getElementById(id);
var ctx=context.getContext("2d");

ctx.lineWidth = 2;//线条的宽度
ctx.strokeStyle = "#b81113";//线条的颜色
ctx.beginPath();
ctx.arc(100,100,94,1.4*Math.PI,1*Math.PI);
ctx.stroke();

}
//用的时候调用就行了
drawArc("myCanvas1");
drawArc("myCanvas2");
drawArc("myCanvas3");