I have a javascript canavas code where if I catch the tag "Canvas" with ID, its starts working, but if i catch it using "TagName" it stop working.

in my code Canvas tag is generating at runtime and I cannot pass the ID for the same so I want to generate the 2D object on Canvas by catching it with tagname.

Here is the code for the same:

JS

    var canvas=document.getElementsByTagName("canvas");
    var context=canvas.getContext("2d");

    function Line(x1,y1,x2,y2){
        this.x1=x1;
        this.y1=y1;
        this.x2=x2;
        this.y2=y2;
    }
    Line.prototype.drawWithArrowheads=function(ctx){

        // arbitrary styling
        ctx.strokeStyle="blue";
        ctx.fillStyle="blue";
        ctx.lineWidth=1;

        // draw the line
        ctx.beginPath();
        ctx.moveTo(this.x1,this.y1);
        ctx.lineTo(this.x2,this.y2);
        ctx.stroke();

        // draw the starting arrowhead
        var startRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
        startRadians+=((this.x2>this.x1)?-90:90)*Math.PI/180;
        this.drawArrowhead(ctx,this.x1,this.y1,startRadians);
        // draw the ending arrowhead
        var endRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
        endRadians+=((this.x2>this.x1)?90:-90)*Math.PI/180;
        this.drawArrowhead(ctx,this.x2,this.y2,endRadians);

    }
    Line.prototype.drawArrowhead=function(ctx,x,y,radians){
        ctx.save();
        ctx.beginPath();
        ctx.translate(x,y);
        ctx.rotate(radians);
        ctx.moveTo(0,0);
        ctx.lineTo(5,20);
        ctx.lineTo(-5,20);
        ctx.closePath();
        ctx.restore();
        ctx.fill();
    }

    // create a new line object
    var line=new Line(50,50,250,275);
    // draw the line
    line.drawWithArrowheads(context);

Here is the Fiddle for the same: /

Let me know if you need any other information.

Please suggest.

I have a javascript canavas code where if I catch the tag "Canvas" with ID, its starts working, but if i catch it using "TagName" it stop working.

in my code Canvas tag is generating at runtime and I cannot pass the ID for the same so I want to generate the 2D object on Canvas by catching it with tagname.

Here is the code for the same:

JS

    var canvas=document.getElementsByTagName("canvas");
    var context=canvas.getContext("2d");

    function Line(x1,y1,x2,y2){
        this.x1=x1;
        this.y1=y1;
        this.x2=x2;
        this.y2=y2;
    }
    Line.prototype.drawWithArrowheads=function(ctx){

        // arbitrary styling
        ctx.strokeStyle="blue";
        ctx.fillStyle="blue";
        ctx.lineWidth=1;

        // draw the line
        ctx.beginPath();
        ctx.moveTo(this.x1,this.y1);
        ctx.lineTo(this.x2,this.y2);
        ctx.stroke();

        // draw the starting arrowhead
        var startRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
        startRadians+=((this.x2>this.x1)?-90:90)*Math.PI/180;
        this.drawArrowhead(ctx,this.x1,this.y1,startRadians);
        // draw the ending arrowhead
        var endRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
        endRadians+=((this.x2>this.x1)?90:-90)*Math.PI/180;
        this.drawArrowhead(ctx,this.x2,this.y2,endRadians);

    }
    Line.prototype.drawArrowhead=function(ctx,x,y,radians){
        ctx.save();
        ctx.beginPath();
        ctx.translate(x,y);
        ctx.rotate(radians);
        ctx.moveTo(0,0);
        ctx.lineTo(5,20);
        ctx.lineTo(-5,20);
        ctx.closePath();
        ctx.restore();
        ctx.fill();
    }

    // create a new line object
    var line=new Line(50,50,250,275);
    // draw the line
    line.drawWithArrowheads(context);

Here is the Fiddle for the same: http://jsfiddle/Sg7EZ/179/

Let me know if you need any other information.

Please suggest.

• javascript
• jquery
• canvas
• 2d

• 1 "not working" should not appear in a title. Use the space wisely to quickly summarize the actual issue. This would be much easier to do if the issue was clearly described in the question. – user2864740 Commented Aug 28, 2014 at 20:42

2 Answers 2

You'll want to change

document.getElementsByTagName("canvas");

to this:

document.getElementsByTagName("canvas")[0];

This way you will get the first element (and only one in this case) instead of the nodelist (which doesn't have a getContext function)

JSFiddle

The better alternative would actually be to use the ID on your canvas element and use something like getElementById("canvas") so you know for sure exactly what element you are using (in case you ever end up with multiple canvas elements).

JSFiddle

getElementsByTagName returns a NodeList, while getElementById returns an Element. Try canvas[0].getContext("2d") to return the first instance of canvas.