Jump to content

Can't Use Variable In This Simple Line Of Code


AARRGGHHH
 Share

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

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
 Share

×
×
  • Create New...