Canvas resizing problem

See more:

ASP.NET

Canvas

Hi Guys,

I'm currently developing a project but I have a problem. I'm trying to make the canvas responsive to when the browser is resized, yet I have a jQuery problem.

When I use the code below, the canvas draws what I included in the code behind but do not respond on resize.

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript">
        $(document).ready(function () {


            //Get the canvas & context 
            var c = $('#myCanvas');
            var ct = c.get(0).getContext('2d');
            var container = $(c).parent();

            //Run function when browser resizes
            $(window).resize(respondCanvas);

            function respondCanvas() {
                c.attr('width', $(container).width()); //max width
                //c.attr('height', $(container).height() ); //max height

                //Call a function to redraw other content (texts, images etc)
                $.ajax({
                    type: "POST",
                    url: "Test.aspx/ResizeCanvas",
                    data: JSON.stringify({ width: $(container).width() }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        eval(data.d);
                    },
                    error: function (msg) {
                        alert(msg);
                    }
                });
            }

            //Initial call 
            respondCanvas();

        }); 
        </script>

And then, when I use the code below, the canvas resizes when the browser is resized, but does not draw anything.

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function () {


           //Get the canvas & context
           var c = $('#myCanvas');
           var ct = c.get(0).getContext('2d');
           var container = $(c).parent();

           //Run function when browser resizes
           $(window).resize(respondCanvas);

           function respondCanvas() {
               c.attr('width', $(container).width()); //max width
               //c.attr('height', $(container).height() ); //max height

               //Call a function to redraw other content (texts, images etc)
               $.ajax({
                   type: "POST",
                   url: "Test.aspx/ResizeCanvas",
                   data: JSON.stringify({ width: $(container).width() }),
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (data) {
                       eval(data.d);
                   },
                   error: function (msg) {
                       alert(msg);
                   }
               });
           }

           //Initial call
           respondCanvas();

       });
       </script>

Basically the difference between the two is the

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

It resizes when the jQuery is not put in that script reference and when the jQuery in in that reference, it does not resize but it draws.

Any help would be much appreciated!
Thank you in advance.