AARRGGHHH

Thank you once again! 

Neither worked, but I'm still trying different things to see if I can make it work.  I've read <foreignObject> is needed, I'm not really sure.    

What I'll ultimately be doing is combining CSS and SVG filters to make changes to an image. This uh ... this can be done, right?  I would think (hope) that canvas.filter will hold all the applied filters, not just the multiple CSS filters. 

Please let me know if you have any other thoughts on applying the svg filter attribute. 

Thanks again!

Just a thought, it's almost as though there's nothing "connecting" the table data and canvas to the filter. But I could be way off on that. 

Thank you so much. Unfortunately, I'm still getting something wrong. The canvas is showing up first, as it should. The SVG is showing up under the canvas. I tried wrapping it in <foreignObject> tags, but that did not help.  Also, the table that the canvas should exist in is outside of the canvas.  I have a feeling I missed something simple. 

							...
							<td id="tdSave" style="width:100%; border-style:none;">
							
							<!-- START NEW SVG CODE --> 
							
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
								<defs>
									<filter id="xPurple">
										<feColorMatrix type="matrix" values="2 0 0 0 0  0 1 0 0 0  0 0 2 0 0  0 0 0 0 1" />
									</filter>
								</defs>
								<foreignObject> 
									<html:canvas id="cSave" width="400" height="200" onclick="clickPreview()" style="position:relative; max-width:100%;">
									</html:canvas>
								</foreignObject>
							</svg>	
											
							<!-- END NEW SVG Code --> 	
						
							</td>  
							...

Screen Shots (hope this helps) are below. 

Many Thanks !!!

I will try that, thank you VERY much.  

Will it be possible manipulate the SVG filter's values (for example, a feColorMatrix or feConvolver filter's matrix values) with JavaScript in my HTML page? 

Thanks again! 

On 12/1/2020 at 9:42 PM, Ingolme said:

Instead of trying to embed the <canvas> in an SVG document, you could put the SVG code in a separate file and load its filter with the CSS filter property.

Thank you for the reply! 

SO what you have in mind is: 

<script> 
    svgfile()
</script> 

And svgfile() is a function in an external file.  How do I get the main page to load the filter from the external page? 

One potential complication: There will also be CSS filters working in the main page.  How can I get the .filter property to accept both CSS filters from the main page, plus SVG filter(s) from the external page?  

Thank you! 

PS: On this page https://www.w3.org/TR/SVG2/embedded.html I found this: Which would seem to imply that a canvas tag can be placed within an svg tag. 

Quote

12.4. HTML elements in SVG subtrees

The following HTML elements render when included in an SVG subtree as a child of a container element and when using the HTML namespace:

• 'video'
• 'audio'
• 'iframe'
• 'canvas'

<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
  <html:video src="file.mp4" controls="controls">
  </html:video>
</svg>

They gave a simple example for video (above), but not for canvas.  Based on that example, I tried this: 
 

<canvas id="cSave" width="400" height="200" onclick="clickPreview()" style="position:relative; max-width:100%;"></canvas>   
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
		<defs>
			<filter id="darkGreen">
				<feColorMatrix type="matrix" values="0  0  0 0 0
                                                 	 0 0.5 0 0 0
                                                 	 0  0  0 0 0
                                                 	 0  0  0 0 1" />
			</filter>
		</defs>
			<html:canvas name="cSave">
			</html:canvas>
	</svg>

Which should create a dark Green color cast.  But all I got was an empty canvas.  Do you think this <svg> inside <canvas> can be made to work? 

Thanks again!  

I've seen this (and similar) code used to apply an SVG filter to an image.  How do I use this code to apply an SVG filter to a canvas?  The canvas' content may change often.  

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<filter id="darkGreen">
			<feColorMatrix type="matrix" values="0 0 0 0 0 	 0 0.5 0 0 0     0 0 0 0 0     0 0 0 0 1" />
		</filter>
	</defs>
	<image xlink:href="(url to image)" width="" height="" filter="url(#darkGreen)" />
</svg>  

Thank you 

CSS and SVG filters can be used to change the appearance of an image on a canvas. However (with CSS at least, I assume it is the same with SVG) the image is not actually changed, just the display of the image is altered. To change the image, you have to copy it to a new canvas and apply the old canvas as a filter:

        var cP = document.getElementById("cPreview");
        var cntxCP = cP.getContext("2d");
        
        var cS = document.getElementById("cSave");
        var cntxCS = cS.getContext("2d");
        
        // take whatever CSS filter(s) is/are applied to the first canvas
        var cssFilter = getComputedStyle(cP).filter; 

        // use that filter as the second canvas' context's filter
        cS.width = cP.width; 
        cS.height = cP.height; 
        cntxCS.filter = cssFilter;
                
        // This changes the image, instead of just changing the display of the image. EXCEPT iOS...  "Compliance" is still just a fantasy at Apple...  

My question is, once a combination of CSS and SVG filters have changed the appearance of an image, what steps have to be taken to apply those changes to the actual image (as was done above with CSS alone).

Please provide sample code, as I'm completely new to SVG Filters.

Thank you!

Changing to absolute or block , or removing the position entirely, just creates different problems.  There's no way to " Just put it in at the bottom of the page." since the location of the bottom will vary based on screen resolution

This CSS does a good job of keeping the footer at the bottom of a page.

https://www.w3schools.com/howto/howto_css_fixed_footer.asp

The problem is that the footer is always visible.  I'd like the footer to only be visible when the user has scrolled to the bottom of the page.  Suggestions?

Thank you

16 hours ago, dsonesuk said:

It would be better to apply this in ALL cases, so you will get into the habit of using this correct method and not have this same issue again! 

No need for concern, this is one I will not forgot!  Thank you for the additional info.  :)

That was the problem !!!  Thank you so much, dsonesuk.

The corrected code is below: 

function click5()
{		
	document.getElementById("preview").style.visibility = "visible"; 
	document.getElementById("cPreviewCaption").style = "font-size:90%; font-weight:550; text-align:center; color:#FFFFFF; padding-top:6px;"; //This could also be updated if needed. 
	
	// Apply change to preview image which will open beneath thumbnails 
	var cP = document.getElementById("cPreview"); 
	var contextP = cP.getContext("2d");
	
	var cO = document.getElementById("cOriginal"); 
	var contextO = cO.getContext("2d");
	
	var imgData = contextO.getImageData(0,0,cO.width,cO.height);
	var data = imgData.data;

	//read full size image 
	for (i = 0; i < data.length; i += 4)
	{						
		red[i] = imgData.data[i];
		green[i] = imgData.data[i+1];
		blue[i] = imgData.data[i+2];
		alpha[i] = imgData.data[i+3];
	}
	
	//set adjustments represented by user interaction with thumbnails 
	for (i = 0; i < data.length; i += 4)
	{						
		red[i] = red[i] + finalRedAdjust;
		if (red[i] < 0) red[i] = 0;  
		if (red[i] > 255) red[i] = 255; 
		green[i] = green[i] + finalGreenAdjust;
		if (green[i] < 0) green[i] = 0; 
		if (green[i] > 255) green[i] = 255; 
	}
	
	//write full size image with adjustments to memory  
	for (i = 0; i < data.length; i += 4)	
	{
		imgData.data[i] = red[i];
		imgData.data[i+1] = green[i];
		imgData.data[i+2] = blue[i]; 
		imgData.data[i+3] = alpha[i];  	
	}				

	//write image in memory to canvas
  	contextP.putImageData(imgData, 0, 0); 

	//set new styles - one at a time to keep Mr. Cook happy... 
	document.getElementById('cOriginal').style.borderStyle = "solid";
	document.getElementById('cOriginal').style.borderColor = "#C0C0C0 #C0C0C0 #606060 #606060";
	document.getElementById('cOriginal').style.visibility =  "hidden"; 
	document.getElementById('cOriginal').style.display = "none"; 
	document.getElementById('cPreview').style.borderStyle = "solid"; 
	document.getElementById('cPreview').style.borderColor = "#C0C0C0 #C0C0C0 #606060 #606060";
	document.getElementById('cPreview').style.visibility = "visible"; 
	document.getElementById('cPreview').style.display = "block"; 

	//Scroll page to preview image 
	location.hash = "null"; 
	location.hash = "previewAnchor";  
}
// End Table Click Event Functions

Thanks again

I will try that next Ingolme, thank you very much.  I have a feeling, since the page is not triggering any errors in the iPhone "Inspector" app, it may not trigger any errors here either.  But it's definitely worth a try. 

Errors like this are how I chose the name AARRGGHHH. 😡

This requires a Mac, correct? Unfortunately, I do not have one.  I have run the file on iOS (on my iPhone) in Chrome, Firefox, and Safari, and the problem appears the same in all three browsers.  The iOS "Inspector" app, which usually points me in the right direction, shows no errors, and its built in browser (I assume Safari) also displays the same lack of a canvas.

This code works perfectly on a desktop or laptop, and on non-iOS mobile devices. It takes a thumbnail sample of an edited image and displays it at full size in a new canvas. On iOS, I just see a blank screen where the canvas should be.

function click5()
{       
    document.getElementById("preview").style = "visibility:visible;"; 
    document.getElementById("cPreviewCaption").style = "font-size:90%; font-weight:550; text-align:center; color:#FFFFFF; padding-top:6px;";  

    // Apply change to preview image which will open beneath thumbnails 
    var cP = document.getElementById("cPreview"); 
    var contextP = cP.getContext("2d");

    var cO = document.getElementById("cOriginal"); 
    var contextO = cO.getContext("2d");

    var imgData = contextO.getImageData(0,0,cO.width,cO.height);
    var data = imgData.data;



    //read full size image 
    //similar image read/write code works fine in another image filter so this does not appear to be the issue 
    for (i = 0; i < data.length; i += 4)
    {                       
        red[i] = imgData.data[i];
        green[i] = imgData.data[i+1];
        blue[i] = imgData.data[i+2];
        alpha[i] = imgData.data[i+3];
    }

    //set adjustments represented by user interaction with thumbnails 
    for (i = 0; i < data.length; i += 4)
    {                       
        red[i] = red[i] + finalRedAdjust;
        if (red[i] < 0) red[i] = 0;  
        if (red[i] > 255) red[i] = 255; 
        green[i] = green[i] + finalGreenAdjust;
        if (green[i] < 0) green[i] = 0; 
        if (green[i] > 255) green[i] = 255; 
    }

    //write full size image with adjustments to memory  
    for (i = 0; i < data.length; i += 4)    
    {
        imgData.data[i] = red[i];
        imgData.data[i+1] = green[i];
        imgData.data[i+2] = blue[i]; 
        imgData.data[i+3] = alpha[i];   
    }               

    //write image in memory to file 
    contextP.putImageData(imgData, 0, 0);

    //add borders for canvases. 
    document.getElementById('cOriginal').style = "border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060; visibility:hidden; display:none;"; 
    document.getElementById('cPreview').style = "border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060; visibility:visible; display:block;"; 

    //Scroll page to preview image 
    location.hash = "null"; 
    location.hash = "previewAnchor";  
}
// End Table Click Event Functions

I have tried this with small images, so dimensions and file size do not appear to be the issue.

Thank you

Amazing, that fixed it.  Thank you very much, Ingolme. 

I'm having a <footer> issue that I cannot figure out.  The footer displays exactly as expected on my desktop at several different resolutions. On my iPhone, sometimes the footer displays normally, and sometimes it displays at a font size of 100% (it should be quite a bit smaller).  

The part that's confusing me is that all of the pages us identical HTML and CSS code: 
 

HTML: 

		</main>
		<footer>
			<script>footer()</script> <!-- footer() is in an external .js page so all pages read the same footer() -->  
		</footer>  
	</body>
</html>    

CSS: 

html
{
background-color:#000000;
width:100%; 
margin-left:auto;
margin-right:auto;
}
 
header 
{
background-color:#000000;
width:100%; 
max-width:1024px;  
margin-left:auto;
margin-right:auto;
}

body 
{
background-color:#000000;
width:100%; 
max-width:1024px;  
margin-left:auto;
margin-right:auto;
}

nav 
{
background-color:#000000;
width:100%; 
max-width:1024px; 
margin-left:8px;
margin-right:auto;
}

main
{
background-color:#000000;
width:100%; 
max-width:1024px;   
margin-left:auto; 
margin-right:auto;
/* float:right; */ 
}


h1, h2, h3, h4, h5, h6 
{
font-family:calibri,verdana,arial,sans-serif;
color:#938FEB;  
text-align:center; 
margin-left:auto;  
margin-right:auto; 
}

p, form, ul, td   
{
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
/* text-align:left; */ 
}

li     
{
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
text-align:left;
font-weight:bold;
}

div  
{
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
text-align:center;  
}

span  
{
font-family:calibri,verdana,arial,sans-serif;
color:#FF0000; 
text-align:center;
}

footer
{
background-color:#000000; 
width:100%;  
max-width:1024px;   
bottom:0; 
/* float:right; */
/* position:fixed; */  
margin-left:auto;
margin-right:auto;
font-size:10px; 
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
text-align:center;
}

#wrapper
{
width:100%; 
}

button 
{
background-color:#8000FF; 
border:none;
border-radius:12px;
color:white;
padding:12px 24px;
text-align:center;
text-decoration:none;
display:inline-block;
font-family:calibri,verdana,arial,sans-serif;
font-size:14px;
}

button:hover
{
background-color:#CC0000;
box-shadow: 10px 10px 10px RGBA(255,255,255,0.8);
}

a:link
{
font-family:calibri,verdana,arial,sans-serif;
color:#00CCFF;
text-decoration:underline; 
}

a:hover
{
font-family:calibri,verdana,arial,sans-serif;
/* color:#00CCFF; */
color:FF0000; 
}

a:visited
{
font-family:calibri,verdana,arial,sans-serif;
/* color:#800080; */ 
color:#938FEB;    
}

function footer()
{
			document.getElementsByTagName("footer")[0].innerHTML = 
			'<p>Line 1<br>' + 
			'Line 2<br>' +
			'Line 3<br>' + 
			'©2018 Line 4<br></p>'; 	
}

I also tried: 

function footer()
{
			document.getElementsByTagName("footer")[0].innerHTML = 
			'<div>Line 1<br>' + 
			'Line 2<br>' +
			'Line 3<br>' + 
			'©2018 Line 4<br></div>'; 	
}

and tried: 

function footer()
{
		document.write('<div>Line 1.<br>');  
		document.write('Line 2<br>'); 
		document.write('Line 3<br>');
		document.write('©2018 Line 4<br>');
}

Yes, I know, the CSS is politically incorrect because I don't use margin and padding.  That does not cause this kind of issue.  

So, how can the same HTML, CSS, and JavaScript cause different pages to print the footer in different ways on the same iPhone? 

Thank you very much!

I have a lot to read through here, but 1 question comes to mind immediately: If I should not use a fixed width for body,  could you supply a code sample of the "wrapper container" you suggested? 

Thank you

On 4/26/2018 at 4:01 AM, Ingolme said:

It's hard to tell, it could be due to the Javascript moving it to the wrong places.

No, your original suggestion that the CSS is throwing off the alignment is correct. 
 

However, the page looks ridiculous without constraining the width. I tried using % instead of pixels and have the same problem. Is there a workaround for controlling page width which will allow me to use my code, which works perfectly, AND keep width control?  

Hi 

Here is the relevant HTML: 

			<div id ="container">
				<br><br><br><br>
				<img src="homeSilverGlassText.png" alt="Home" width="200" height="35" id="bar0" onmouseover="startMove(0)" />
				<br><br><br><br>
				<img src="aboutSilverGlassText.png" alt="Anout Me" width="200" height="35" id="bar1" onmouseover="startMove(1)" />
				<br><br><br><br>
				<img src="contactSilverGlassText.png" alt="Contact Me" width="200" height="35" id="bar2" onmouseover="startMove(2)" />
				<br><br><br><br>
				<img src="gallerySilverGlassText.png" alt="Gallery" width="200" height="35" id="bar3" onmouseover="startMove(3)" />
				<br><br><br><br>
				<img src="uiSilverGlassText.png" alt="Design" width="200" height="35" id="bar4" onmouseover="startMove(4)" />
				<br><br><br><br>
				<img src="imgeditSilverGlassText.png" alt="Editor" width="200" height="35" id="bar5" onmouseover="startMove(5)" />
			</div>

The container item is only used on this page, not on the entire website, so its CSS is in the <style></style> tags, it did not work on any resolution but mine. 

If it's possible to avoid absolute positioning here, please tell me how! 

Your sample menu is doing exactly what it should be doing.   

You mentioned that the CSS in the <style></style> tags should work regardless of resolution.  Do you know why it's not working?  

Many thanks!   

dsonesuk, an absolute positioning follow up question: I'm using canvases layered with z-index on a page.  And, as you know, everything that occurs after position: absolute; becomes a problem.  I'm under the impression absolute is needed when layering canvases, is this correct? 

Thank you   

That would be nice!!!

The first block of code looks fine at my resolution of 1366.  When I switch to my laptop's resolution of 1920,  the images disappear (possibly off to the far left).

Also, the scrollbar at the bottom of the page extends to the far right, beyond 1920 pixels

In case it's useful, here is the page's style sheet: 

 

header 
{
background-color:#000000;
width:1024px; 
margin-left:auto;
margin-right:auto;
}

body 
{
background-color:#000000;
width:1024px;
margin-left:auto;
margin-right:auto;
}

nav 
{
background-color:#000000;
width:1024px;
margin-left:15px;
margin-right:auto;
}

main
{
background-color:#000000;
width:1024px;
margin-left:auto; 
margin-right:auto;
/* float:right; */ 
}

h1, h2, h3, h4, h5, h6 
{
font-family:calibri,verdana,arial,sans-serif;
color:#938FEB;  
text-align:center; 
margin-left:auto;  
margin-right:auto; 
}

p, form, ul, td   
{
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
/* text-align:left; */ 
}

li     
{
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
text-align:left;
font-weight:bold;
}

div  
{
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
text-align:center;
}

span  
{
font-family:calibri,verdana,arial,sans-serif;
color:#FF0000; 
text-align:center;
}

footer
{
background-color:#000000; 
width:1024px;  
bottom:0; 
/* float:right; */
/* position:fixed; */  
margin-left:auto;
margin-right:auto;
}

Thank you !!!  

I'm using somewhat unusual navigation, as seen here. When a user mouses over the bars, they slide out into view. All of that is working fine. The problem is, I cannot find the CSS to make the buttons align left of the edge of the screen (as seen in the image), regardless of the display dimensions.

<style>
#container {width: 600px; height: 25px; position: relative;} 
#bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: -340px;}"; 
</style> 

function populateArrays() 
{                 
  // populate arrays
  for (i = 0; i <= 5; i++)  
  {
    position[i] = -340; 
    bar[i] = document.getElementById("bar" + i.toString());
    id[i] = i; 
  }
  // Add a dynamically built style sheet 
  var sheet = document.createElement('style');  
  var sWidth = screen.width; 
  var lWidth = sWidth - 1024 // 1024px is width of the page body. The result, 342, works perfectly at my resolution of 1366: 1366 - 1024 = 342 (I use -342).    
  sheet.innerHTML = "#container {width: " + sWidth + "px; height: 25px; position: relative;} #bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: " + -(lWidth) + "px;}"; 
  document.body.appendChild(sheet);           
}

For future reference, since I know others will have this issue, this seems to resolve it: 

					var image = document.getElementById("arrowImage");
					var context = arrowCanvas.getContext('2d');
					context.save();
					context.translate(240, 255); //where to put image
					context.rotate(-180 * Math.PI / 180); //angle 
					// context.drawImage(image, -image.width / 2, -image.height / 2);
					context.drawImage(image, 0, 0);
					//restore the canvas
					context.restore(); 

The w3Schools sample code is a bit lacking, since it only covers drawings, not images.  

Not 100% finished testing yet, but I think it's gonna work. 

I tried 45 degrees, no luck.  I'm certainly open to suggestion! 

Thank you, Ingolme