Search code examples
htmlbuttoncanvasonclick

Is there a way to change the image on a canvas, with a button click?

On a click I want the image to change on the canvas. While re enabling the buttons that were disabled.

Here is my button code

 <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>

Here us my canvas code

<img id="Man2" width="0" height="0" src="Man2.PNG" alt="Man2">

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

<script>
window.onload = function() {
  const canvas = document.getElementById("myCanvas1");
  const ctx = canvas.getContext("2d");
  const img = document.getElementById("Man2");
  ctx.drawImage(img, 10, 10);
};
</script>

Here is the image already on the canvas.

Here is the image on the canvas.

and this is what I want the image change into.

Yeah

I tried to add another button id and tried to get element by Id on the canvas but it just didn't work.

Solution 
  • <div style="position:absolute; left:625px; top:100px; background-color:white;">
    <button id="btn1" type="button" onclick="detain()">Detain</button>
    <button id="btn2" type="button" onclick="free()">Free them</button>
</div> 

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

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    //Image IDS
    var imageMan1 = "Man1.png";
    var imageMan2 = "Man2.png";

    changeImage(imageMan2); //First image loaded on the canvas


    function detain() {
        alert('The guy was disappointed. The guards come in and detain him. I think I made the wrong choice');
        document.getElementById('btn2').disabled = false;
        document.getElementById('btn1').disabled = true;
        changeImage(imageMan1); //Change based on button click
    }

    function free() {
        alert('The guy sighs in relief and looks happy. The guards guide him to the exit. I think I made the right decision');
        document.getElementById('btn1').disabled = false;
        document.getElementById('btn2').disabled = true;
        changeImage(imageMan2); //Change based on button click
    }

    function changeImage(imageSrc) {
        ctx.clearRect(0, 0, canvas.width, canvas.height); //This should clear the canvas
        var img = new Image();
        img.src = imageSrc;
        img.onload = () => {ctx.drawImage(img, 10, 10);};  
    }
</script>

    Here in this snippet, the button clicks are handled inside of the script tag, in particular after the canvas is created and the reference exists.

    EDIT

    After our discussion, I took a moment to test the code which resulted in it working on calling ctx.drawImage when the image is loaded (img.onload).

    This, however, worked just on the first execution, because after that both the images were loaded so the img.onload inside of changeImage had no effect.

    Therefore having the image paths inside of js and loading them there straight away is the way to go (especially if you plan on having more, which will result in a lot of Image tags inside of HTML, that aren't actually used)