I have a html page in which i need to add more than 1 canvas element and load it on the page load.

function draw()
{
var c=document.getElementById("myCanvas");
var padding = 20;
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#E05D1B");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,275,50);
}

<canvas id="myCanvas" width="250" height="8" style="margin-bottom:10px;margin-left:10px;">
<img src="images\gradient1.png" style="margin-bottom:10px;margin-left:10px;"/>
</canvas>

I am adding like this code with different id but i need to recode the javascript; how can i reduce it??

<canvas id="myCanvas1" width="250" height="8" style="margin-bottom:10px;margin-left:10px;"> <img src="images\gradient1.png" style="margin-bottom:10px;margin-left:10px;"/> </canvas>

I have a html page in which i need to add more than 1 canvas element and load it on the page load.

function draw()
{
var c=document.getElementById("myCanvas");
var padding = 20;
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#E05D1B");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,275,50);
}

<canvas id="myCanvas" width="250" height="8" style="margin-bottom:10px;margin-left:10px;">
<img src="images\gradient1.png" style="margin-bottom:10px;margin-left:10px;"/>
</canvas>

I am adding like this code with different id but i need to recode the javascript; how can i reduce it??

<canvas id="myCanvas1" width="250" height="8" style="margin-bottom:10px;margin-left:10px;"> <img src="images\gradient1.png" style="margin-bottom:10px;margin-left:10px;"/> </canvas>

• javascript
• html
• canvas

Share Improve this question Follow edited May 17, 2012 at 8:41 net.uk.sweet 12.4k33 gold badges2626 silver badges4242 bronze badges asked May 17, 2012 at 6:14 GOKGOK 2,43866 gold badges3636 silver badges6868 bronze badges 2

• You need to "reduce" it? What do you mean by that? – Madara's Ghost Commented May 17, 2012 at 6:21
• if u see the draw function, we have a single id myCanvas for multiple items we need to add multiple lines of code; how can i make it generic(or reduce lines of code)...? – GOK Commented May 17, 2012 at 6:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You could pass the contexts of your separate canvas elements as a parameter to your draw function (fiddle):

function draw(ctx)
{
    var grd=ctx.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#E05D1B");
    grd.addColorStop(1,"#00FF00");
    ctx.fillStyle=grd;
    ctx.fillRect(0,0,275,50);
}

draw(document.getElementById("canvas_1").getContext("2d"));
draw(document.getElementById("canvas_2").getContext("2d"));

Or, depending on how many canvas elements you have, it may be more efficient to call your draw function on a loop (fiddle):

function draw(ctx)
{
    var grd=ctx.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#E05D1B");
    grd.addColorStop(1,"#00FF00");
    ctx.fillStyle=grd;
    ctx.fillRect(0,0,275,50);
}

var i = 1;
while (document.getElementById("canvas_" + i)) {
   draw(document.getElementById("canvas_" + i).getContext("2d"));
   i ++;       
}