複数のdrawImage（）を1つのキャンバスに追加する

Question

複数の図面を1つのキャンバスに追加する際に問題があります。 https://jsfiddle.net/ym5q9ktp/

HTML：：

<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;"> 
    Your browser does not support the HTML5 canvas tag. 
</canvas> 

JS：

function lc(canv, x1, y1, x2, y2) { 
    c = canv.getContext("2d"); 
    c.beginPath(); 
    c.moveTo(x1, y1); 
    c.lineTo(x2, y2); 
    c.strokeStyle = "red"; 
    c.stroke(); 
    return c 
} 

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 

ctx.beginPath(); 
ctx.moveTo(0, 0); 
ctx.lineTo(200, 100); 
ctx.stroke(); 

ctx.drawImage(lc(canvas, 15, 56, 56, 75), 10, 10); 
ctx.drawImage(lc(canvas, 25, 56, 156, 95), 80, 80); 

コードはjsのコードの最後の行の第二の赤線を引いていない私はいくつかの例を作りました。それを修正するには？

Answer 1

これは、JSは完全に赤い線を描画します（またはほとんど、あなたがそれをしたい場所に応じて。）（Live Fiddle）：

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 

var draw = function(var1, var2, var3, var4) { 
ctx.beginPath(); 
ctx.moveTo(var1, var2); 
ctx.lineTo(var3, var4); 
ctx.stroke(); 
} 

draw(0, 0, 200, 50) 
draw(0, 10, 200, 60) 

draw(15, 56, 200, 150) //これは、各ラインを描画する関数draw（）を呼び出し

コード内のdraw()関数には、たとえば設定した4つのパラメータがあります。

黒線を同じ方法で描画すること、つまり関数から取り除くこと、または関数から取り除き、黒線を別のdraw（）コールを追加することが最善の方法です。

15 = TOP X軸、56 = TOP Y軸、200 =ボトムX軸、150 =ボトムY軸

またそうのようなあなたの関数に色の別のparamを追加することができます。

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 

var draw = function(var1, var2, var3, var4, color) { 
    ctx.beginPath(); 
    ctx.strokeStyle = color; // Takes the fifth param "color" 
    ctx.moveTo(var1, var2); 
    ctx.lineTo(var3, var4); 
    ctx.stroke(); 
} 

draw(0, 0, 200, 50, "red") 
draw(0, 10, 200, 60, "black") 

を