asked on

HTML Canvas

Hello,

I am trying to create a "animate the circle to go from left to right in the middle of the canvas". I need some help to define the circle function to make it work. I need some instruction on how to do this.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
#sketch {
border:1px solid #000;
}
</style>
<canvas id="sketch" width="480" height="720"> </canvas>
<script>
document.addEventListener(‘DOMContentLoaded’, main);
//add a listener to your document to handle onload events… set it to run your main function
var sketch;
var context;
//declare variables for canvas element, drawing instrument
var circle;
var dx = 2;
//velocity
var fps = 10;
//delay in milliseconds before your animate function is called
var animation;

function main() {
sketch = document.getElementById(‘sketch’);
//get your sketch element;
context = sketch.getContext(“2d”);
//create your context;
circle = {‘x’:25, ‘y’:sketch.offsetHeight / 2, ‘r’:25};
//create the circle object;
animation = setInterval(animate, fps);
//specify a function to be called repeatedly at a specific interval;
}

function animate() {
context.clearRect(0, 0, sketch.offsetWidth, sketch.offsetHeight);
//clear the screen
draw_circle(circle.x, circle.y, circle.r);
//draw circle at current position of circle object
circle.x = circle.x + dx;
//move the circle 's position by adding velocity
}

}

</script>
</body>
</html>

HainKurt

what is draw_circle?
dot you have any code for that?

nav2567

ASKER

I need to do something like the attached but I do not know how to do it - rename the file extension from .txt to .mov and you will see.

circle-animate.mov.txt

HainKurt

anyways, I found a function for that

function draw_circle(x, y, r) {
  context.beginPath();
  context.arc(x, y, r, 0, 2 * Math.PI, false);
  context.lineWidth = 3;
  context.strokeStyle = '#FF0000';
  context.stroke();
}

Open in new window

put a limit of 100
https://jsfiddle.net/HainKurt/qsphbzd6/

Norie

This will draw the circle but I can't figure out why the canvas isn't being cleared.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>
<style>
  #sketch {
    border: 1px solid #000;
  }
</style>

<body>

  <canvas id="sketch" width="480" height="720"> </canvas>
  <script>
    document.addEventListener('DOMContentLoaded', main);
    //add a listener to your document to handle onload events… set it to run your main function
    var sketch;
    var context;
    //declare variables for canvas element, drawing instrument
    var circle;
    var dx = 2;
    //velocity
    var fps = 100;
    //delay in milliseconds before your animate function is called
    var animation;

    function main() {
      sketch = document.getElementById('sketch');
      //get your sketch element;
      context = sketch.getContext('2d');
      //create your context;
      circle = {
        'x': 25,
        'y': sketch.offsetHeight / 2,
        'r': 25
      };

      //create the circle object;
      animation = setInterval(animate, fps);
      //specify a function to be called repeatedly at a specific interval;
    }

    function animate() {

      //clear the screen
      context.clearRect(0, 0, sketch.width, sketch.height);

      //draw circle at current position of circle object
      context.arc(circle.x, circle.y, circle.r, 0, (Math.PI / 180) * 360, true);
      context.stroke()

      //move the circle 's position by adding velocity
      circle.x = circle.x + dx;

    }
  </script>
</body>

</html>

Open in new window

nav2567

ASKER

Thanks, I believe I need this one. I am still learning it so my version is more simple

function draw_circle(x, y, r) {
   context.beginPath();
   context.arc(x, y, r, 0, 2 * Math.PI, true);
   context.closePath();
   context.fill();
}

Open in new window

HainKurt

result is a circle, black border, filled with red, moving from left to right and disappears...
max animation set to 250, o/w may kill my browser :)

HainKurt

I updated my demo with your function...
https://jsfiddle.net/HainKurt/qsphbzd6/

ASKER CERTIFIED SOLUTION

Norie

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nav2567

ASKER

I am testing.
Norie, I am testing latest version of yours but the screen is still not cleared. Please see attached.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
#sketch {
border: 1px solid #000;
}
</style>

<body>

<canvas id="sketch" width="480" height="720"> </canvas>
<script>
document.addEventListener('DOMContentLoaded', main);
//add a listener to your document to handle onload events… set it to run your main function
var sketch;
var context;
//declare variables for canvas element, drawing instrument
var circle;
var dx = 2;
//velocity
var fps = 10;
//delay in milliseconds before your animate function is called
var animation;

function main() {
sketch = document.getElementById('sketch');
//get your sketch element;
context = sketch.getContext('2d');
//create your context;
circle = {
'x': 25,
'y': sketch.offsetHeight / 2,
'r': 25
};

//create the circle object;
animation = setInterval(animate, fps);
//specify a function to be called repeatedly at a specific interval;
}

function animate() {
context.beginPath();
//clear the screen
context.clearRect(0, 0, sketch.width, sketch.Height);
//draw circle at current position of circle object
draw_circle(context, circle);
context.stroke()

context.closePath();

//move the circle 's position by adding velocity
circle.x = circle.x + dx;

function draw_circle(ctx,dims) {
const {x,y,r} = dims;
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI, true);
ctx.closePath();
}

}
</script>
</body>

</html>

nav2567

ASKER

For this assignment, I just need the circle to go from left to right. No bounce.

HainKurt, your version is too hard for me. I do not have the "layout" do not know how to test your version.

nav2567

ASKER

I look at both of your code and I come up with the version that works. Thanks again for helping!!!

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
#sketch {
border: 1px solid #000;
}
</style>

<body>

<canvas id="sketch" width="480" height="720"> </canvas>
<script>
document.addEventListener('DOMContentLoaded', main);
//add a listener to your document to handle onload events… set it to run your main function
var sketch;
var context;
//declare variables for canvas element, drawing instrument
var circle;
var dx = 2;
//velocity
var fps = 10;
//delay in milliseconds before your animate function is called
var animation;

function main() {
sketch = document.getElementById('sketch');
//get your sketch element;
context = sketch.getContext('2d');
//create your context;
circle = {
'x': 25,
'y': sketch.offsetHeight / 2,
'r': 25
};

//create the circle object;
animation = setInterval(animate, fps);
//specify a function to be called repeatedly at a specific interval;
}

function animate() {
//clear the screen
context.clearRect(0, 0, sketch.offsetWidth, sketch.offsetHeight);

//draw circle at current position of circle object
draw_circle(circle.x, circle.y, circle.r);

//move the circle 's position by adding velocity
circle.x = circle.x + dx;

function draw_circle(x, y, r) {
context.beginPath();
context.arc(x, y, r, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
}

}
</script>
</body>

</html>

HainKurt

HainKurt, your version is too hard for me

actually it is the simplest of all :)

I just added a draw_circle function and fixed all the synax errors
then replaced that function with yours
+ added a limit of 250, instead of looping indefinitely (which kills browser if there is any error)
nothing else...