javascript Strange Issue: Canvas will not open in iOS

[AARRGGHHH]

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

[davej]

Does the Safari console show any errors?

https://support.apple.com/guide/safari-developer/debugging-overview-devd24689f72/mac

[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.

[Ingolme]

At this point I would start debugging using the alert() function. To start off, put in alert() right at the beginning of the click5() function to see if it is even being called. If that works, try alerting different variables in the function to see if they contain what they are supposed to.

Since you don't have a Javascript console available on the iPhone, you can set up a small script to show the errors in alert boxes like this:

window.onerror = function(message, file, line) {
  alert("Error in " + file + " on line " + line + ": " + message);
}

Be sure to remove it after all issues are solved.

[AARRGGHHH]

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. 😡

[dsonesuk]

It may be a compatibility issue in using

document.getElementById("preview").style = "multiple style properties"

to set multiple properties.

IT IS advised to use this to set a singular property only, while by using document.getElementById("preview").style.cssText = "multiple style properties" OR document.getElementById("preview").setAttribute('style', 'multiple style properties') is another option.

[AARRGGHHH]

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

[dsonesuk]

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!  Alternatively as mentioned before use 

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

  instead, which IS a perfectly acceptable method of adding multiple CSS properties in one go, but will overwrite any previous inline styling already present, instead of adding to present styling.

[AARRGGHHH]

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.  :)