I am unable to implement JCanvas

Question

I am new to learn JCanvas. I am trying to implement a simple JCanvas program. Here is my code:

<!DOCTYPE html>
   <html>
    <head>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">             </script>
        <script src='jcanvas.min.js'></script>
    </head>
    <body>
        <canvas id="drawingCanvas" width="500" height="500" style="border:1px solid  black;align:center;"></canvas>
        <script>
           var canvas = document.getElementById("drawingCanvas");
           var ctx = canvas.getContext("2d");
           $('canvas').drawArc({
              strokeStyle: 'green',
              draggable: true,
              x:100, y:100,
              radius: 50
           });
        </script>
    </body>
</html>

But I am unable to Implement the above. The Circle I am trying to draw here is not getting displayed on the canvas. What Am I doing wrong?

Anton Boritskiy · Answer 1 · 2014-02-25T09:24:08.570

Looks like your code is quite fine itself. Consider wrapping your code in $(document).ready(function () {});, like this:

<script>
$(document).ready(function () {
   $('canvas#drawingCanvas').drawArc({
      strokeStyle: 'green',
      draggable: true,
      x:100, y:100,
      radius: 50
   });
});
</script>

This guarantees that your code will executed when the whole DOM structure is loaded in browser memory and ready to interact with JavaScript. See jQuery docs for more details.

I've also created jsFiddle, where your code just works. I attached the jCanvas using URL from here, so it might stop working occasionally.

UPDATE: removed unused variables from the code, added id to jQuery selector.
UPDATE2: Without jsFiddle, it should look like that

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">

    <title>Sample</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('canvas#drawingCanvas').drawArc({
                strokeStyle: 'green',
                draggable: true,
                x:100, y:100,
                radius: 50
            });
        });
    </script>
</head>
<body>
    <canvas id="drawingCanvas" width="500" height="500" style="border:1px solid  black;align:center;"></canvas>
</body>
</html>

UPDATE3: Please do not use jCanvas attaching like in the sample above, the link was grabbed from jCanvas showroom and is not supposed to be reliable CDN. It might be changed or removed, and it might not be ready to high load.

Yeah I tried that code too, it also failed. Everything is okay but cant understand what the problem is? — user3188826, Feb 25 '14 at 08:51
Ok, then which browser do you use? For me it works fine in Chrome, Safari and FireFox, but fails in IE11, let me investigate why. — Anton Boritskiy, Feb 25 '14 at 08:55
Consider also checking Chrome developer tools console. To open it on Windows just hit `F12`, switch to console tab inside it and then reload the page. See this https://developers.google.com/chrome-developer-tools/ for more details. — Anton Boritskiy, Feb 25 '14 at 09:06
@user318826, looks like your `jcanvas.min.js` is missing. Download it and place to corresponding path. Try also the full HTML which I've just added to the answer, it uses CDN versions of both `jQuery` and `jCanvas`. — Anton Boritskiy, Feb 25 '14 at 09:15

user3320982 · Answer 2 · 2014-02-25T15:48:19.423

there are probably other ways, but this works. I sourced jCanvas and jQuery internally

  <!DOCTYPE html>
   <html>
    <head>  
        <script src="jquery.js"></script>
        <script src='jcanvas.min.js'></script>    
    <script>
           var canvas = document.getElementById("canvas");
           var ctx = canvas.getContext("2d");
           function init(){
              $("canvas").drawArc({
              strokeStyle: 'green',
              draggable: true,
              x:100, y:100,
              radius: 50
              });
           }

    </script>
    </head>

    <body onload="init()">
        <canvas id="canvas" width="500" height="500" style="border:1px solid  black;align:center;"></canvas>
    </body>
</html>

I am unable to implement JCanvas

2 Answers2