0

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>
Jonn Mc
  • 15
  • 1
  • 7
  • 1
    Does this answer your question? [Canvas is stretched when using CSS but normal with "width" / "height" properties](https://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties) – Randy Casburn Dec 21 '20 at 20:21
  • 1
    prop and style are different. – robdev91 Dec 21 '20 at 20:23
  • Yes that is it there is a default attribute associated with the canvas. – Jonn Mc Dec 22 '20 at 00:08

1 Answers1

1

You should specify unit for width and height

#ballWindow {
     width: 960px;
     height: 640px;
Dick Larsson
  • 487
  • 3
  • 5