Canvas Drawing Help

[Bidgeeman]

Hi everyone.

I just joined the group and not great at Javascript.  Just know enough to get me into trouble which I am in

Making a small interactive app similar to an Identikit where you choose heads, eyes, nose, mouth etc then draw

all overlay ed images to the canvas and just turn visibility on and off. Problem I am having is adusting these two

lines of script so they can accept a variable to change the element Head1 to Head 2,3,4,5 etc and also the

ctx.drawimage to similar. I have 5 text boxes that hold the script ID's and I grab the ID's from here and somehow

need to replace them in the below code. I have tried as hard as I can with no success

 

var img = GetElement("Head1");
ctx.drawImage(img,0,0,Head1.Width,Head1.Height);

 

If anyone can help I would be happy to pay a small fee.

Many thanks

Bidge

[Saint_Pepsi]

Hi @Bidgeeman,

One way you could achieve that is by writing a function like follows:

function drawHeadImage(head) {
  const headImage = GetElement(head);
  ctx.drawImage(headImage,0,0,headImage.width,headImage.height); 
}

so to call that you would write:

drawHeadImage("Head1");
drawHeadImage("Head3");

so if you grab id's from somewhere you can then just pass the ID's into those functions and it will draw the image you desire.

Hope that helps
 

[Bidgeeman]

Hi Saint_Pepsi

Thank you so much for that! I will have to  work through your suggestion as I am not great with functions just yet but I really appreciate your help. This morning I managed to get the first line of the code to work using a variable. I was getting the syntax wrong being a newbie.

var Imtx =TextBoxGet("Text1");
var Imtx2 = (''+Imtx); 
var img = GetElement(Imtx2); 

The last line though I cannot get working with a vairaible.

ctx.drawImage(img,0,0,Imtx.Width,Imtx.Height);

Imtx is grabbed from the text box = Head1 but when I insert it into the code I get a black png export! If I hard code Head1 into this line it exports fine. What m I doing wrong? I will try your function too but I would like to learn what I am doing wrong with my approach as well. Thank you so much Saint_Pepsi for your help on this and I am happy to pay you for your time.

[Bidgeeman]

Hi Saint_Pepsi. I'm getting this error on the function:

Error (Button1.On Click) : ReferenceError: drawHeadImage is not defined 1

Not sure what I am doing wrong?

[Solserv]

Hi! I am HTML5 Game developer with more than 6 years in making games. 

 

I had gone through your requirements and like work on it in order to get the required result regarding drawing images on canvas. I will try to provide the best, simple and commented code for your requirements. 

Please contact me

email: [email protected] 

for more discussion, So I can provide the best solution form my side. 

 

Regards

Solvserv

[Bidgeeman]

Hi Solserv.

Thanks for your offer but I managed to get Saint_Pepsi solution to work with many many thanks.

Bidge

[Solserv]

That amazing to know. You may contact me for such requirements in future. 

Regards

Solvserv