CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
JackU
JackU

Reputation: 1476

Getting 2 canvas images to appear with 1 button

I'm trying to get multiple canvas images to appear with 1 button press. I can get one image to work perfect, but the second one I can't. I know that ID's have to be unique and that only the first canvas will have an image currently.

HTML

<!DOCTYPE html>
<html>
    <head>
        <script src="script.js"></script>
    </head>
    <body>
        <div class="bg">
            <img src="Assets/Images/background.png" alt="background">   
        </div>
        <section class="content">

            <img id="taxi" src="Assets/Images/PV.png" width="106" height="53">
            <canvas id="myCanvas" width="106" height="53"
            style="border:1px solid #d3d3d3; position:absolute; left:510px;top:117px;">
            Your browser does not support the HTML5 canvas tag.</canvas>
            <canvas id="myCanvas" width="106" height="53"
            style="border:1px solid #d3d3d3; position:absolute; left:310px;top:117px;">
            Your browser does not support the HTML5 canvas tag.</canvas>

            <p><button onclick="myCanvas()">Try it</button></p>
        </section>

    </body>
</html>

JS

function myCanvas() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("taxi");
    ctx.drawImage(img,0,0,106,53);
  }

I know that I can get it work by changing one the id="myCanvas" in the HTML and repeating the current lines in the script to get it to work. But the end web page will have lots of canvas' and I didn't want to keep repeating the javascript code.

Is there a simple way of doing what I am trying to achieve?

Upvotes: 1

Views: 44

Answers (1)

kockburn
kockburn

Reputation: 17606

HTML elements cannot have the same id. You'll need to retrieve your elemnts some other way. There are many ways; getElementsByTagName, getElementsByClassName, querySelectorAll, ... etc.

Use querySelectorAll(".content > canvas"); This will select all direct children that are canvas elements in the element that has the class of "content" (which in this case is your section element).

function myCanvas() {
    document.querySelectorAll(".content > canvas").forEach(c=>{
      var ctx = c.getContext("2d");
      var img = document.getElementById("taxi");
      ctx.drawImage(img,0,0,106,53);
    });
}

Basic example:

function myCanvas() {
    document.querySelectorAll(".content > canvas").forEach(c=>{
      var ctx = c.getContext("2d");
      var img = document.getElementById("taxi");
      ctx.drawImage(img,0,0,106,53);
    });
}
<section class="content">

  <img id="taxi" src="https://static-s.aa-cdn.net/img/ios/899287106/45820b5b6bba46c7fcd853a46d554a34?v=1" width="106" height="53">
  <canvas width="106" height="53" style="border:1px solid #d3d3d3; position:absolute; left:510px;top:117px;">
            Your browser does not support the HTML5 canvas tag.</canvas>
  <canvas width="106" height="53" style="border:1px solid #d3d3d3; position:absolute; left:310px;top:117px;">
            Your browser does not support the HTML5 canvas tag.</canvas>

  <p><button onclick="myCanvas()">Try it</button></p>
</section>

Upvotes: 1

Related Questions