Jump to content

Canvas Drawing Help


Recommended Posts

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");


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

Many thanks


Link to comment
Share on other sites

Hi @Bidgeeman,

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

function drawHeadImage(head) {
  const headImage = GetElement(head);

so to call that you would write:


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

Link to comment
Share on other sites

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.


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.

Link to comment
Share on other sites

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. 




Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...