Jump to content

Can't Use Variable In This Simple Line Of Code


AARRGGHHH

Recommended Posts

This should be so simple... 

I am using a canvas variable here (i) without any problems: 
 

    for (i = 1; i < 10; i++) 
    {	
      c = document.getElementById("canvas" + i.toString()); 
      context = c.getContext("2d");
      
      context.drawImage(image,0,0,c.width,c.height);  					
    }	

But I cannot seem to get it right here: 
 

    function clicked(thumbNumber)
    {			
      //drawImage() in canvas5 using canvas1 as the source   
      var canvasNumber = "canvas" + thumbNumber.toString(); 
      canvas5.getContext('2d').drawImage(canvasNumber, 0, 0);  
    }

When I step into it and pass ""canvas" + thumbNumber.toString()" it's correct (for example, "canvas1"). But when it hits the next line, where "canvas1" is used, it grinds to a halt with the error: 

"color.html:332 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
    at clicked (color.html:332)
    at HTMLTableCellElement.onclick (VM548 color_balance.html:769)

So, apparently it's not recognizing "canvas1" which is on line 332. If I hard code "canvas1" it works fine, but that's not practical here.   

I have tried at least a half dozen variations on a theme at "canvas5.getContext('2d').drawImage(canvasNumber, 0, 0);" but nothing seems to make any difference, I'm not giving the browser (Chrome Version 64.0.3282.186 (Official Build) (64-bit) on Windows 7 Pro) what it wants to see.  

Thank you in advance

Link to comment
Share on other sites

You're just using a string, if thumbNumber is 1 then you're just passing the text "canvas1" to drawImage.  If that's an element on the page then you need to get the actual element instead of just passing its ID.

Link to comment
Share on other sites

Let's keep in mind that 

canvas5.getContext('2d').drawImage(canvas1, 0, 0);  

works fine.  Isn't "canvas1" what I would want to pass to the first argument? 

8 hours ago, justsomeguy said:

If that's an element on the page then you need to get the actual element instead of just passing its ID.

I'm not really sure what you mean.  How would I go about getting "the actual element" and placing it in the first argument? 

Thank you very much! 

 

Link to comment
Share on other sites

Okay, I think I see what you mean by text vs element: 


  var canvasNumber = document.getElementById("canvas" + thumbNumber); 
  canvas5.getContext('2d').drawImage(canvasNumber, 0, 0);  
 

That's working. :) Any additional comments, please feel free. 

Thank you

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...