Is there a way I can make an image appear in the canvas when I click 2 of the buttons?

by

So I want an image to appear in the canvas when a button is clicked. It overlays the image already on the canvas.

This is the canvas code (Done in html)

window.onload = function() {
  const canvas = document.getElementById("myCanvas1");
  const ctx = canvas.getContext("2d");
  const img = document.getElementById("Man2");
  ctx.drawImage(img, 10, 10);
};
<img id="Man2" width="0" height="0" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" alt="Man2">

<canvas id="myCanvas1" width="600" height="450" style="border:1px solid grey;"></canvas>


<div style="position:absolute; left:625px; top:100px; background-  color:white;">
  <button id="btn1" type="button" onclick="alert('The guy was disapointed. The guards come in and detain him. I think I made the wrong choice'); document.getElementById('btn2').disabled = true;">Detain</button>
  <button id="btn2" type="button" onclick="alert('The guy sighs in relief and looked happy. The guards guide him to the exit. I think I made the right decision'); document.getElementById('btn1').disabled = true;">Free them</button>
</div>

I tried a lot and It just appeared on places where I didn’t want it to and for the life of me I can’t get the button to display the image!

  • 1

    I only see one image in the code posted – which other images is supposed to be overlaid? Please add a minimal reproducible example to your question and expand on what’s not working

    – 

Leave a Comment