I have a canvas that is being used for a JavaScript game. When using jQuery or external CSS, the canvas sizes correctly, but the *game graphics are larger than they should be* (causing most of the graphics to not appear on screen).

When using inline CSS, I get no graphical problems. Although it does get the job done, I need to be able to re-size the canvas at any time. 

When using jQuery, I grab the canvas's context AFTER sizing, hoping that would work, but it didn't. Can someone inform me on whats going on, or direct me to where I can learn more about managing the context of HTML canvas?

Here is my HTML code that includes no inline-css

HTML:

```
<!DOCTYPE html>
<html>

        <head>
                <script type = "text/javascript" src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                <script type = "text/javascript" src = "games/snake.js"></script>

                <link rel = "stylesheet" type = "text/css" href = "styles/home.css" />
        </head>

        <body>
                <div id = "navBar" class = "navAtt">
                        <div id = "firstButton" class = "navButton">Play Game</div> 
                </div>

                <div id = "mainView" class = "center">
                        <canvas id = "canvas" class = "center"></canvas>
                </div> 

                <script>
                        var firstButton = $("#firstButton");
                        var canvas = $("#canvas");

                        firstButton.click(function() {
                                /* This is where I was sizing with jQuery; no other size methods were used
                                        canvas.width(450);
                                        canvas.height(400);
                                */
                                var ctx = $("#canvas")[0].getContext("2d");
                                startSnakeGame(canvas.width(), canvas.height(), ctx);
                        });
                </script>
        </body>
</html>

```

CSS:

```
body {
        background-color: #66C2FF;
        margin: 0;
}

#navBar {
        border-bottom: 2px solid #2CABB4;
        position: fixed;
        width: 100%;
}

#mainView {
        padding-top: 100px;
        width: 1200px;
}

#canvas { /* This is how I'm affecting the size; This is blank when I try using jQuery */
        width: 450px;
        height: 400px;
}

.center {
        margin-left: auto;
        margin-right: auto;
}

.navAtt {
        background-color: #29A3A3;
        height: 40px;
        opacity: 0.7;
}

.navButton {
        padding: 10px 20px;
        float:left;
}

```

JavaScript (the game)

```
function startSnakeGame(w, h, ctx) {
    init();

    var cw = 10;
    var d;
    var food;
    var score;
    var cw = 10;
    var d;
    var food;
    var score;
    var snake_array; 

    function init() {
        d = "right"; 
        create_snake();
        create_food(); 
        score = 0;

        if(typeof game_loop != "undefined") clearInterval(game_loop);
        game_loop = setInterval(paint, 60);
    }

    function create_snake() {
        var length = 5; 
        snake_array = []; 
        for(var i = length-1; i>=0; i--) {
            snake_array.push({x: i, y:0});
        }
    }

    function create_food() {
        food = {
            x: Math.round(Math.random()*(w-cw)/cw), 
            y: Math.round(Math.random()*(h-cw)/cw), 
        };
    }

    function paint() {
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, w, h);
        ctx.strokeStyle = "black";
        ctx.strokeRect(0, 0, w, h);

        var nx = snake_array[0].x;
        var ny = snake_array[0].y;

        if(d == "right") nx++;
        else if(d == "left") nx--;
        else if(d == "up") ny--;
        else if(d == "down") ny++;

        if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array)) {
            init();
            return;
        }

        if(nx == food.x && ny == food.y) {
            var tail = {x: nx, y: ny};
            score++;
            create_food();
        } else {
            var tail = snake_array.pop(); 
            tail.x = nx; tail.y = ny;
        }

        snake_array.unshift(tail);

        for(var i = 0; i < snake_array.length; i++) {
            var c = snake_array[i];
            paint_cell(c.x, c.y);
        }

        paint_cell(food.x, food.y);
        var score_text = "Score: " + score;
        ctx.fillText(score_text, 5, h-5);
    }

    function paint_cell(x, y) {
        ctx.fillStyle = "blue";
        ctx.fillRect(x*cw, y*cw, cw, cw);
        ctx.strokeStyle = "white";
        ctx.strokeRect(x*cw, y*cw, cw, cw);
    }

    function check_collision(x, y, array) {
        for(var i = 0; i < array.length; i++) {
            if(array[i].x == x && array[i].y == y)
             return true;
        }
        return false;
    }

    $(document).keydown(function(e) {
        var key = e.which;
        if(key == "37" && d != "right") d = "left";
        else if(key == "38" && d != "down") d = "up";
        else if(key == "39" && d != "left") d = "right";
        else if(key == "40" && d != "up") d = "down";
    })
}

```