Question

I’ve created a drawing using canvas which I intend to use multiple times for various navigation links, my problem is that when I refer to it more than once it will only show 1. Obviously I could duplicate the code for each instance but I plan on using this quite a lot so this is not ideal. Please have a look at the code below and the linked jsfiddle. Many thanks.

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

You can only have unique ID’s

---

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"));