如何多次引用我html5 canvas畫圖？

Question

我創建了一個使用畫布的繪圖，我打算多次使用各種導航鏈接，我的問題是，當我多次引用它時，它只會顯示1.顯然，我可以複製每個實例的代碼，但是我計劃使用這個相當多，所以這不是理想的。請看下面的代碼和鏈接的jsfiddle。非常感謝。

http://jsfiddle.net/LTu2H/

//first reference 
<canvas id="canvasId" width="50" height="50"></canvas> 
//second reference 
<canvas id="canvasId" width="50" height="50"></canvas> 

<script> 
var context = document.getElementById("canvasId").getContext("2d"); 

var width = 125; // Triangle Width 
var height = 45; // Triangle Height 
var padding = 5; 

// Draw a path 
context.beginPath(); 
context.moveTo(padding + width-125, height + padding);  // Top Corner 
context.lineTo(padding + width-90,height-17 + padding); // point 
context.lineTo(padding, height-35 + padding);   // Bottom Left 
context.closePath(); 

// Fill the path 
context.fillStyle = "#9ea7b8"; 
context.fill(); 
</script> 

Answer 1

你只能有唯一的ID的

---

HTML：

<canvas id="canvasId" width="50" height="50"></canvas> 
<canvas id="canvasId2" width="50" height="50"></canvas> 

JS：

function drawSomething(canvas) { 
    var context = canvas.getContext("2d"); 

    var width = 125; // Triangle Width 
    var height = 45; // Triangle Height 
    var padding = 5; 

    // Draw a path 
    context.beginPath(); 
    context.moveTo(padding + width-125, height + padding);  // Top Corner 
    context.lineTo(padding + width-90,height-17 + padding); // point 
    context.lineTo(padding, height-35 + padding);   // Bottom Left 
    context.closePath(); 

    // Fill the path 
    context.fillStyle = "#9ea7b8"; 
    context.fill(); 

} 

drawSomething(document.getElementById("canvasId")); 
drawSomething(document.getElementById("canvasId2"));