AARRGGHHH

This seems so simple: 
 

				var aC = document.getElementById("arrowCanvas");
				var context = aC.getContext("2d");
				var img = document.getElementById("arrowImage");
				context.drawImage(img, 225, 225);			
				context.rotate(90 * Math.PI / 180); 

But the canvas never rotates. 

Also tried: 

				var aC = document.getElementById("arrowCanvas");
				var context = aC.getContext("2d");
				var img = document.getElementById("arrowImage");
				context.rotate(90 * Math.PI / 180);				
				context.drawImage(img, 225, 225);			
				 

But here, the canvas never even shows up. 

I could use some help with the correct syntax. 

Thank you!  

Thank you for the reply.

"return value" states: 

Thus, I am assuming I cannot use my code to check for focus.   So, how do I check for focus? 

Thank you 

I'm having a problem determining if a given control has focus.  It seems to me that:

if (form.password.focus() == true) ...

should tell me if the form's password control has focus.  But, it's returning "false" even while I'm typing into the control.  

So, what is the correct way to determine whether a control has focus? 

Thank you! 

dsonesuk, this worked perfectly, thank you very much for your time.  

Yes, I understand that process, that wasn't really the question.  The reason I'm guessing is that I don't know the answer.  Is there a way to retrieve just the hue value (or just the saturation value) etc...  I'm guessing that such a command exists, but I do not know what it is. 

Thank you 

Hello

I need to get the value of a CSS Filter, Hue in this case, that's currently being applied to a canvas.  I tried this: 

var hue = document.getElementById('canvas1').style.filter('hue-rotate'); 

and it did not work, several variations on that theme also failed.  

What is the correct syntax? 

Thank you very much 

PS: this could apparently also work 

var hue = getComputedStyle(canvas1).filter

But it will not retrieve just the hue. 

Thank you 

1 hour ago, justsomeguy said:

You can attach a submit event handler to run before the form gets submitted, but that doesn't go in the action.  

Okay, so where would that go?  For example, could I put an onclick  in the submit button that will fire and validate before the action sends the mail? 

Thank you

PS: Regarding "It will take a day or two for a domain name to be assigned to an IP address."

Go Daddy already has a parking page at the URL.  Does this mean that the DNS Servers/IP Address concern is resolved as long as I stay with Go Daddy? 

Thank again!!

I have a form written using HTML5 and CSS3, final validation is performed on submit with JavaScript.  Then, the form will be sent to the server, most likely using PHP's mail() function.  I don't recall how to include two items such as these in a form's action="...", I'd deeply appreciate if someone could refresh my memory! 

Thank you 

Okay, thank you very much for clarifying! 

In regard to formatted emails, can mail() do basic formatting such as line breaks? I'm not looking for attachments and colors and font selection at the moment, as long as everything isn't run together as one long string with no line breaks I'll be happy. 

Also, any suggestions as to a host would be welcomed.  Does that issue still exist where it takes a couple days for the IP address to propagate once it is assigned to a web host? 

Thank you very much  

It's been a long time since that PHP class in college, and the majority of my focus since graduating has been on HTML5 / CSS3 / JavaScript.  I'm getting ready to go live with a new website.  I have a contact form build with HTML5 and CSS3 with validation done with JavaScript.  The only problem is, I'll need a PHP script to send the form via email. 

Is there a basic, easy to use script that someone could recommend?  Also, is it possible that my web host (I'll possibly be going with Go Daddy) will make such a script available?   I'm hoping to find something that's essentially plug and play. 

Thank you  

I just came back here to close this thread.  justsomeguy, you were right on the money.  I used document.write() to print the values to screen, the printed values showed only minor differences, they were due to a minor change I had forgotten about. 

One thing I did learn from this is that canvas.toDataURL() actually does work quite well for determining whether 2 images are duplicates.   

justsomeguy, thank you very much for your time. 

I'm trying to use Base64 to compare two images to see if they are identical. 

The images are accessed using: 

var thumb5Original = ""; 
var thumb5Edited = ""; 

thumb5Original = canvas5.toDataURL('image/png');
thumb5Edited = canvas5.toDataURL('image/png');

  I then check them using this: 

if (thumb5Original.toString() == thumb5Edited.toString()) document.getElementById('tHeader5').innerHTML = "Original Image"; 
if (thumb5Original.toString() != thumb5Edited.toString()) document.getElementById('tHeader5').innerHTML = "Edited Image"; 

The problem is, I'm getting "Edited Image" even when the images are identical.  Is there an error in the way I'm comparing the images? 

Thank you  
 

Thank you very much for posting.  I got moved to something else so I haven't been able to try it out yet, I'll let you know how it goes. Thanks again

Ingolme, I will not turn this into a programming philosophy debate.  I will either do it the way I'm doing it now, or I will use loops.  If you know how to assist me in using loops, that would be deeply appreciated.  If you do not know how to assist me in using loops, I understand.   

Hi Ingolme 

Thank you for the rapid reply. Arrays would necessitate adding a total of 26 arrays to this code, which would over-complicate the code and could waste memory as well.  I would really prefer to do this with variables.  Do you have any suggestions?   

Yes, "-=" is used to modify the variable itself.  

Thanks! 

I need to create variable names in a loop (part of this seems to be working) and then get 26 of the 39 variables to perform simple math (for example: variable -= 10). Getting the variables recognized as variables, and not text, seems to be the issue.

This works properly, it accesses 13 canvases named canvas1 through canvas13:

for (i = 1; i < 14; i++)   
{   
  c = document.getElementById("canvas" + i.toString()); 
  context = c.getContext("2d");
  ...                                   
} 

However, when I try to dynamically create canvas names, and dynamically create 2 variables in the same line, the variables are created as text.

for (i = 1; i < 14; i++)
{
  document.getElementById('canvas' + i).style.filter = "brightness((bright" + i + " -= 10)%) contrast((cont" + i + " -= 10)%)"; 
}   

Probably a dozen variations on this theme have failed. In a nutshell, the variables bright1 and cont1 through bright13 and cont13 are not recognized as variables that can be manipulated with math, they're recognized as text.

Right now I'm typing out 13 lines of code:

document.getElementById('canvas1').style.filter = "brightness(" + (bright1 -= 10) + "%) contrast(" + (cont1 -= 10) + "%)";          
...
document.getElementById('canvas13').style.filter = "brightness(" + (bright13 -= 10) + "%) contrast(" + (cont13 -= 10) + "%)";       

which is inefficient, to say the least.

So, what is the proper syntax to use so that bright1 through bright13 and cont1 through cont13 are variables instead of text?

Thank you!

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

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! 

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

I have resized an image to fit inside a canvas without any problems.  However, now I need to resize a canvas without resizing the image that it contains.  How do I do this? 

Thank You

1. Actually, I checked that page on w3Schools before posting here.  That's how I arrived at the code that I used.  But it's not working.

2. I am using camelCase, for example:

canvasDisplay

But I do not know what you mean by "Hypens", so I do not know how this is causing a problem. Is this a subjective option (like global variables) or a requirement? Did you mean the hyphen in z-index? That's the code used on the page at W3Schools.  Please clarify!

Thank you very much
 

My canvas z-index is not working, the canvases are  both showing up. Canvas1 displays then canvas2 displays beneath it. 

HTML:

		<!-- Canvas locations -->
   		<div id="canvasDisplay" style="position:relative;"> 
			<canvas style="z-index:1; position:relative;" id="canvas1" width="1" height="1">Your browser is too old to support this feature. 				<br>Please consider updating to a modern browser.</canvas>
			<canvas style="z-index:2; position:relative;" id="canvas2" width="1" height="1">Your browser is too old to support this feature. 				<br>Please consider updating to a modern browser.</canvas>  
		</div>

 This displays canvas1 properly.  However, when using JavaScript to hide canvas1 behind canvas2, I get both canvases. 

JavaScript:

                cnv1.style = "z-index:2; position:relative;"
                cnv2.style = "z-index:1; position:relative;"

I'd appreciate any assistance.

Thank you