Jump to content
Sign in to follow this  
AARRGGHHH

Can't Use Variable In This Simple Line Of Code

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

Share this post


Link to post
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.

Share this post


Link to post
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! 

 

Share this post


Link to post
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

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...