Is it possible to add img to CANVAS after window.load?

Question

Good afternoon Devs o/

I have a question, I need to insert an image to <canvas>. But that’s not all, I’m putting together a blog creation system for Instagram, so I have several templates in the database, I need to put it inside the <canvas> and so far I’ve put the photo of the template, user, name of the same and position. Getting this result:

We can see that everything is going well, but the real problem is in selecting the employee that the user wants to do the post. At the time of print the selected name is Bruna, but no photo was loaded. And I say that the problem is not in PHP.

I did not put the connection information with the bank and table, because I am solving the problem in production

header("Content-type: image/gif");
if($row=mysqli_fetch_object($result)) { 
   echo "
       var canvas = document.getElementById('canvas');
       context = canvas.getContext('2d');
                    
       img4 = new Image(115,115)
       img4.src = 'data:image/png;base64,'
       img4.onload = function(){
          context.drawImage(img4, 201, 128, img4.width, img4.height)
          context.font = '11px Montserrat';
          context.fillText('".$row->nome_consultor."', 222, 258);
       } 
    "
}

When going to the console and placing img4, it returns the tag img with all attributes I requested for PHP, but html is not 'showing' the content inserted in <canvas>.

Does anyone know if the canvas have post-loading limitations? Or actually have some syntax problem?

Thanks in advance <3

Answer 1

Hello. It seems that your code has confusion between backend and frontend.

You are informing that the output of your PHP will be a gif:

header("Content-type: image/gif");

But you’re writing JS code:

echo "
       var canvas = document.getElementById('canvas');
       context = canvas.getContext('2d');
                    
       img4 = new Image(115,115)
       img4.src = 'data:image/png;base64,'
       img4.onload = function(){
          context.drawImage(img4, 201, 128, img4.width, img4.height)
          context.font = '11px Montserrat';
          context.fillText('".$row->nome_consultor."', 222, 258);
       } 
    "

I honestly couldn’t understand much of what you want to do, but I can state for sure that either your header is wrong.