Can't get an image from a .png file to display in a canvas.

[gregaryb]

This is the code I am using:

 

function doDisplayHelper(Context, ComponentImage, nPosX, nPosY)
{
	Context.drawImage(ComponentImage, nPosX, nPosY);
	Context.beginPath();
	Context.rect(0, 0, nPosX, nPosY);
	Context.stroke();
}

class CComponentBase
{
	constructor()
	{
		this.m_strImageFile = "";
		this.m_arrayPins = new CPinArray();
		this.m_strDeviceName = "";
		this.m_nPosX = 100;
		this.m_nPosY = 100;
	}
	
	getImageFileName()
	{
		return this.m_strImageFile;
	}
	
	setDeviceName(strDeviceName)
	{
		this.m_strDeviceName = strDeviceName;
	}
	
	getDeviceName()
	{
		return this.m_strDeviceName;
	}
	
	isSelected()
	{
		return false;
	}
	
	doSelect()
	{
	}
	
	doUnselect()
	{
	}
	
	doDisplay()
	{
		var Canvas = getElement("canvas");
		var Context = null;
		var ComponentImage = null;
		var strImageID = this.getImageFileName();
		var nPosX = this.m_nPosX, nPosY = this.m_nPosY;
		
		if (Canvas != null)
		{
			Context = Canvas.getContext("2d");
			if (Context != null)
			{
				ComponentImage = new Image();
				ComponentImage.src = strImageID;
				ComponentImage.onload = function() {doDisplayHelper(Context, ComponentImage, nPosX, nPosY);};
			}
		}
	}
}

As you can see from the image below there is nothing wrong with the parameters to the doDisplayHelper function because I can draw a rectangle just fine.

I just cannot get the image from the .png file to display.

Also below is a break point in Firefox developer edition showing the var containing the .png file name.
Which definitely exists and is correct.

So why does my .png image refuse to display?

 

 

 

 

Edited January 25, 2022 by gregaryb

[Ingolme]

Are there any errors in the browser console?

Try putting the image path into an <img> tag on the page to see if it appears. If it doesn't, then the path isn't correct.

[gregaryb]

10 hours ago, Ingolme said:

Are there any errors in the browser console?

Try putting the image path into an <img> tag on the page to see if it appears. If it doesn't, then the path isn't correct.

What on earth has an img tag got to to with my canvas?
I can't do that for every image that might be dragged and dropped on to my canvas though.

 

Edited January 26, 2022 by gregaryb

[Ingolme]

I was just saying to use an <img> tag temporarily to test that the image URL actually works properly.

If the image is not visible when using an <img> tag, it means that the URL is invalid.