Trouble using HTML5 canvas

Question

I'm new to HTML5. I wonder why the following code can't show a rectangle on the screen?

<!DOCTYPE HTML>
<html>
<head>
    <title>WebServer Test</title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var userviewcanvas = $("userViewerCanvas");
            var userviewcontext = userviewcanvas.getContext("2d");
            userviewcontext.fillRect(40, 40, 100, 100);
        });
    </script>
</head>
<body>

    <canvas id="userViewerCanvas" width="200" height="300">this is canvas</canvas>
    <div><span id="message"> </span> </div>
    <div><span id="stream"></span></div>

</body>
</html>

Vipul Vaghasiya · Accepted Answer · 2013-08-12 04:57:57Z

3

check this

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<title>WebServer Test</title>


<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var userviewcanvas = $("#userViewerCanvas").get(0),
        userviewcontext = userviewcanvas.getContext("2d");
        userviewcontext.fillRect(40, 40, 100, 100);
    });
</script>
</head>

<body>

    <canvas id="userViewerCanvas" width="200" height="300">this is canvas</canvas>
    <div><span id="message"> </span> </div>
    <div><span id="stream"></span></div>

</body>
</html>

answered Aug 12, 2013 at 4:57

Vipul Vaghasiya

4791 gold badge5 silver badges16 bronze badges

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

Comments

Conrad Lotz · Accepted Answer · 2013-08-12 05:00:02Z

2

There are a couple of ways you can try and solve this problem:

Normal jQuery

var userviewcanvas = $("#userViewerCanvas").get(0);

Normal Javascript

var userviewcanvas = document.getElementById("userViewerCanvas");

There is a plugin that you can also make use of:

jCanvas

answered Aug 12, 2013 at 5:00

Conrad Lotz

8,9533 gold badges25 silver badges28 bronze badges

Comments

VahidNaderi · Accepted Answer · 2013-08-12 05:25:07Z

2

You missed the sharp sign in your jQuery selector expression and of course you need get(0) to get the plain javascript object instead of jQuery object:

var userviewcanvas = $("#userViewerCanvas").get(0);

edited Aug 12, 2013 at 5:25

answered Aug 12, 2013 at 4:58

VahidNaderi

2,4881 gold badge24 silver badges36 bronze badges

Collectives™ on Stack Overflow

Trouble using HTML5 canvas

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related