HTML5 multiple canvas in a page

Question

    <!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>Animating Sprites In HTML5 Canvas | onlyWebPro.com</title>
</head>
<body>
    <canvas id="myCanvas" width="100" height="100">
        <!-- Insert fallback content here -->
        Sorry, your browser doesn't support canvas technology
    </canvas>
    <script>
    var width = 100,
            height = 100,
            frames = 4,

            currentFrame = 0,

            canvas = document.getElementById("myCanvas");
            ctx = canvas.getContext("2d");
            image = new Image()
            image.src = 'sprite.png';

    var draw = function(){
            ctx.clearRect(0, 0, width, height);
            ctx.drawImage(image, 0, height * currentFrame, width, height, 0, 0, width, height);

            if (currentFrame == frames) {
              currentFrame = 0;
            } else {
              currentFrame++;
            }
    }

    setInterval(draw, 100);
    </script>
</body>
</html>

The above is the code for creating a canvas which runs a sprite animation sequence in canvas.

Now I want to include another canvas image in same html. when i tried the old one gets replaced so please help me to create another canvas with another image.

Anyone solve it by providing a way to create a multiple canvas in a single HTML page

just add another canvas, give it a different id, do the samething. — kennypu
– kennypu, Commented Jul 20, 2013 at 9:59

Ivan Chernykh · Accepted Answer · 2013-07-20 09:59:28Z

1

Add this at html part:

<canvas id="mySecondCanvas" width="100" height="100">
        <!-- Insert fallback content here -->
        Sorry, your browser still doesn't support canvas technology
    </canvas>

And this how you get this canvas with javascript:

var second_canvas = document.getElementById("mySecondCanvas");

:)

answered Jul 20, 2013 at 9:59

Ivan Chernykh

42.2k13 gold badges136 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tckmn Over a year ago

Just don't put anything inside the second <canvas> tag - why would you tell the user about non-support twice?

Collectives™ on Stack Overflow

HTML5 multiple canvas in a page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related