CODEWITHSUNDEEP
javascripthtmlcss
Jonn Mc
Jonn Mc

Reputation: 25

Inline CSS vs styling in the head - getting different behaviors

this has me baffled. I am trying to get an image to move around in a canvas. If I put the styling in the head it doesn't work correctly. In-line does. I have seen similar questions, but I have not been able to extrapolate what I am doing wrong. I am trying to address other "issues" in the code but cant get past this. Thanks in advance for help.

Code that works:

<html>
  <head>
    <title>Bounce 1</title>
    <style>
            #ballWindow {
                border-style:solid;
                border-color:red;
                border-width: 1px;
                background-color: black;
            }
    </style>
  </head>
  <body onload="moveBall()" >
    <canvas id="ballWindow" width="960" height="640">
    </canvas>
    <script>
    var ctx = null;
        var x_icon = 0;
        var y_icon = 0;
        var stepX = 1;
        var stepY = 1;
        var size_x = 30;
        var size_y = 30;
        var canvas_size_x = 960;
        var canvas_size_y = 640;
        var anim_img = null;
              
        function moveBall() {
            var canvas = document.getElementById("ballWindow");
            ctx = canvas.getContext("2d");
            anim_img = new Image(size_x, size_y);
            anim_img.onload = function() { setInterval('myAnimation()', 10); }
            anim_img.src = 'jupiter.jpg';
        }
        function myAnimation() {
                ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);
                if (x_icon < 0 || x_icon > canvas_size_x - size_x) {stepX = -stepX; }
                if (y_icon < 0 || y_icon > canvas_size_y - size_y) {stepY = -stepY; }
                x_icon += stepX;
                y_icon += stepY;
                ctx.drawImage(anim_img, x_icon, y_icon);
        }
    </script>  
  </body>
</html>

Code that doesnt work (ball image too big and goes out of frame):

<html>
  <head>
    <title>Bounce 2 </title>
    <style>
            #ballWindow {
                width: 960;
                height: 640;
                border-style:solid;
                border-color:red;
                border-width: 1px;
                background-color: black;
            }
    </style>
  </head>
  <body onload="moveBall()" >
    <canvas id="ballWindow" >
    </canvas>
    <script>
    var ctx = null;
        var x_icon = 0;
        var y_icon = 0;
        var stepX = 1;
        var stepY = 1;
        var size_x = 30;
        var size_y = 30;
        var canvas_size_x = 960;
        var canvas_size_y = 640;
        var anim_img = null;
              
        function moveBall() {
            var canvas = document.getElementById("ballWindow");
            ctx = canvas.getContext("2d");
            anim_img = new Image(size_x, size_y);
            anim_img.onload = function() { setInterval('myAnimation()', 10); }
            anim_img.src = 'jupiter.jpg';
        }
        function myAnimation() {
                ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);
                if (x_icon < 0 || x_icon > canvas_size_x - size_x) {stepX = -stepX; }
                if (y_icon < 0 || y_icon > canvas_size_y - size_y) {stepY = -stepY; }
                x_icon += stepX;
                y_icon += stepY;
                ctx.drawImage(anim_img, x_icon, y_icon);
        }
    </script>  
  </body>
</html>

Upvotes: 0

Views: 48

Answers (1)

Dick Larsson
Dick Larsson

Reputation: 785

You should specify unit for width and height

#ballWindow {
     width: 960px;
     height: 640px;

Upvotes: 1

Related Questions