Jump to content

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");

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

  • Create New...