Create canvas using jquery dynamically (on the fly in memory)

Question

I've been looking at similar questions regarding dynamic canvas creation (1, 2), but they assuming canvas is already in the DOM. But what if I want to create and draw canvas on the fly (in other words no canvas or any other parent elements are present in the DOM)?

Something along the lines of this (which doesn't work):

<!DOCTYPE HTML>
<html>
<head>
    <title>canvas test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            for (var i = 0; i < 3; i++) {
                var canvas = $('<canvas />').attr({
                        id: "canvas" + i,
                        width: 20,
                        height: 20
                    });

                var ctx = $(canvas)[0].getContext('2d');
                ctx.fillStyle = "#000";
                ctx.fillRect(0, 0, 20, 20);
                $("#events").append("<tr><td>" + canvas[0].outerHTML + "</td></tr>");
            }
        });
    </script>
</head>
<body>
    <table id="events">
        <tr>
            <th>Canvas</th>
        </tr>
    </table>
</body>
</html>

JJJ · Accepted Answer · 2013-04-11 17:32:11Z

1

Nothing happens because you aren't appending the canvas itself but its markup. The contents of the canvas can't be expressed in HTML so the markup is just an empty canvas tag.

So instead of appending the outerHTML, append the elements themselves.

$("<tr><td></td></tr>").appendTo( '#events' ).find( 'td' ).append( canvas );

Demo:http://jsfiddle.net/2Lr5h/

edited Apr 11, 2013 at 17:32

answered Apr 11, 2013 at 17:27

JJJ

33.2k20 gold badges95 silver badges103 bronze badges

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

Collectives™ on Stack Overflow

Create canvas using jquery dynamically (on the fly in memory)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related