dynamically creating canvas tags with javascript

Question

momoh 0 Newbie Poster

14 Years Ago

so my problem is that I want to find a way of using canvas tags that are created at runtime.

I went about this by trying to change the id of the tag, ONLY to find out that javascript
did not like the fact that I was using numbers, even though I converted to String first...

   var count = 0;
   for (var item=0; item<20; item ++) {
      if (count%5==0){
            document.write(" ||| ");
      }
       var canv = document.createElement("canvas");
       canv.setAttribute('width',300);
       canv.setAttribute('height',300);

      num = 505;   
      aStr = num.toString();  // does NOT do the job for some reason !!!???
      aStr = 'canvas';          // this works...

      canv.setAttribute('id',aStr);
      document.body.appendChild(canv);
      count += 1;
   }
   var C = document.getElementById(canv.getAttribute('id'));
   if (C.getContext) {
      makePlot(C);      // does the plot to the canvas
   }

javascript

Edited 11 Years Ago by mike_2000_17 because: Fixed formatting

3 Contributors
6 Replies
6K Views
5 Years Discussion Span
Latest Post 9 Years Ago Latest Post by Z3tbrVZSvmnh

fxm 23 Posting Pro

14 Years Ago

javascript did not like the fact that I was using numbers

Here is a test

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <script>
        var count = 0;
        for (var item = 0; item < 20; item++) {
            if (count % 5 == 0) {
                document.write(" ||| ");
            }
            var canv = document.createElement("canvas");
            canv.setAttribute('width', 300);
            canv.setAttribute('height', 300);

            num=505;
            canv.setAttribute('id', num);
            document.body.appendChild(canv);
            count += 1;
        }
        var C = document.getElementById(canv.getAttribute('id'));
        if (C.getContext) {
            alert(C.nodeName); 
            alert(C.getAttribute('id')); 
        }
    </script>
    <title></title>
  </head>
  <body>
  </body>
</html>

The two alerts return "CANVAS" and "505" [as they should].

Aside from the fact the all 20 <canvas> elements have the same id

<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>
<canvas id="505" height="300" width="300"></canvas>

where is the problem?

fxm 23 Posting Pro

14 Years Ago

I want to be able to have different canvas IDs, so that in another javascript function I can do a loop that goes through and makes the plot to the different canvases

OK, I fixed your loop

for (var item = 0; item < 20; item++) {
            if (item % 5 == 0) {
                document.write(" ||| ");
            }
            var canv = document.createElement("canvas");
            canv.setAttribute('width', 300);
            canv.setAttribute('height', 300);

            canv.setAttribute('id', item);
            document.body.appendChild(canv);
        }
        var C = document.getElementById(canv.getAttribute('id'));
        if (C.getContext) {
            alert(C.nodeName); 
            alert(C.getAttribute('id')); 
        }

so now you get

<body>|||  |||  |||  ||| 
    
  
  <canvas width="300" height="300" id="0"></canvas>
<canvas width="300" height="300" id="1"></canvas>
<canvas width="300" height="300" id="2"></canvas>
<canvas width="300" height="300" id="3"></canvas>
<canvas width="300" height="300" id="4"></canvas>
<canvas width="300" height="300" id="5"></canvas>
<canvas width="300" height="300" id="6"></canvas>
<canvas width="300" height="300" id="7"></canvas>
<canvas width="300" height="300" id="8"></canvas>
<canvas width="300" height="300" id="9"></canvas>
<canvas width="300" height="300" id="10"></canvas>
<canvas width="300" height="300" id="11"></canvas>
<canvas width="300" height="300" id="12"></canvas>
<canvas width="300" height="300" id="13"></canvas>
<canvas width="300" height="300" id="14"></canvas>
<canvas width="300" height="300" id="15"></canvas>
<canvas width="300" height="300" id="16"></canvas>
<canvas width="300" height="300" id="17"></canvas>
<canvas width="300" height="300" id="18"></canvas>
<canvas width="300" height="300" id="19"></canvas></body>

I wanted it to work with numbers because as I go thru the loop I want to be able to make the count the id of the canvas.

I still can't figure out what your problem is. Does a statement you wrote in some other function throw an error when the id= field starts with a digit?

If so, either change line 9 to something like canv.setAttribute('id', 'cvs'+item); or fix [what I suspect is] a coding error in that 'other' statement.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

momoh 0 Newbie Poster · Answer 1 · 2010-05-16T19:45:57+00:00

I wanted it to work with numbers because as I go thru the loop I want to be able to make the count the id of the canvas.
So different IDs for all the 20 canvases.

I want to be able to have different canvas IDs, so that in another javascript function I can do a loop that goes through and makes the plot to the different canvases

momoh 0 Newbie Poster · Answer 2 · 2010-05-16T21:29:29+00:00

here are the bits and pieces of it all...

<html>
 <head>
  <script type="application/javascript">

function makePlot(elem) {

 var ctx = elem.getContext("2d");
   ctx.fillStyle   = '#00f';
   ctx.strokeStyle = 'black';
   ctx.lineWidth   = 5;

   ctx.beginPath();
   ctx.moveTo(0,0);
   ctx.lineTo(0, H);

   ctx.lineTo(W, H);
   ctx.stroke();
   ctx.closePath();
}

function putCanvs() 
{
         for (var item = 0; item < 20; item++) {
            if (count != 0 && count%5== 0) {
                document.write(" ||| ");
            }
            var canv = document.createElement("canvas");
            canv.setAttribute('width', 300);
            canv.setAttribute('height', 300);

            canv.setAttribute('id', 'canv'+item);

            document.body.appendChild(canv);

             var C = document.getElementById(canv.getAttribute('id'));
             if (C.getContext) {              
                if (C.getContext) {
                   makePlot(C);
                }
             }
         }
}

</script>


 </head>
 <body onLoad="putCanvs();"> 

 </body>
</html>

momoh 0 Newbie Poster · Answer 3 · 2010-05-16T22:11:43+00:00

i figured out what i've been doing wrong. THANKS for your input!

Z3tbrVZSvmnh · Answer 4 · 2015-05-17T03:10:08+00:00

The reason why the 505.toString() didn't work is because in CSS a id cannot start with a number even if it is technically a string representing a number it doesn't care because it still starts with the character '5'