I am currently trying to code a circle that moves once I run a function. Here is my code:

function move(element, direction, distance = 20, duration = 1000) { //the move function
    var topOrLeft = (direction == "left" || direction == "right") ? "left" : "top";
    var isNegated = (direction == "up" || direction == "left");
    if (isNegated) { distance *= -1; }
    var elStyle = window.getComputedStyle(element);
    var value = elStyle.getPropertyValue(topOrLeft).replace("px", "");
    var destination = Number(value) + distance;
    var frameDistance = distance / (duration / 10);
    function moveAFrame() {
        elStyle = window.getComputedStyle(element);
        value = elStyle.getPropertyValue(topOrLeft).replace("px", "");
        var newLocation = Number(value) + frameDistance;
        var beyondDestination = ((!isNegated && newLocation >= destination) || (isNegated && newLocation <= destination));
        if (beyondDestination) {
            element.style[topOrLeft] = destination + "px";
            clearInterval(movingFrames);
        }
        else {
            element.style[topOrLeft] = newLocation + "px";
        }
    }
    var movingFrames = setInterval(moveAFrame, 10);
}

function draw() //draws the circle
{
    var canvas = document.getElementById('circle');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        var X = canvas.width / 2;
        var Y = canvas.height / 2;
        var R = 400;
        ctx.beginPath();
        ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
        ctx.lineWidth = 3;
        ctx.strokeStyle = '#000000';
        ctx.stroke();
    }
}
move(circle, "right", 20, 200) //move function
    

As you can see in the code, i first drew the circle (works) and made a function that moves the circle. However, when i run the function the circle does not move. Please help thanks

I am currently trying to code a circle that moves once I run a function. Here is my code:

function move(element, direction, distance = 20, duration = 1000) { //the move function
    var topOrLeft = (direction == "left" || direction == "right") ? "left" : "top";
    var isNegated = (direction == "up" || direction == "left");
    if (isNegated) { distance *= -1; }
    var elStyle = window.getComputedStyle(element);
    var value = elStyle.getPropertyValue(topOrLeft).replace("px", "");
    var destination = Number(value) + distance;
    var frameDistance = distance / (duration / 10);
    function moveAFrame() {
        elStyle = window.getComputedStyle(element);
        value = elStyle.getPropertyValue(topOrLeft).replace("px", "");
        var newLocation = Number(value) + frameDistance;
        var beyondDestination = ((!isNegated && newLocation >= destination) || (isNegated && newLocation <= destination));
        if (beyondDestination) {
            element.style[topOrLeft] = destination + "px";
            clearInterval(movingFrames);
        }
        else {
            element.style[topOrLeft] = newLocation + "px";
        }
    }
    var movingFrames = setInterval(moveAFrame, 10);
}

function draw() //draws the circle
{
    var canvas = document.getElementById('circle');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        var X = canvas.width / 2;
        var Y = canvas.height / 2;
        var R = 400;
        ctx.beginPath();
        ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
        ctx.lineWidth = 3;
        ctx.strokeStyle = '#000000';
        ctx.stroke();
    }
}
move(circle, "right", 20, 200) //move function
    

As you can see in the code, i first drew the circle (works) and made a function that moves the circle. However, when i run the function the circle does not move. Please help thanks

• javascript
• html
• function
• canvas

• 1 @Robert An entirely reasonable comment. I have removed the java tag, and reported TaouBen's inappropriate comment. – rzwitserloot Commented Mar 21 at 1:21

1 Answer 1

You are drawing the circle on a canvas. Then you want to move the canvas around using cumbersome code. Anyway, the position of the canvas should be one that allows for being able to move around, like absolute.

Pro tip: use CSS translate transformation, if you must move Elements around.

function move(element, direction, distance = 20, duration = 1000) {
  var topOrLeft = (direction == "left" || direction == "right") ? "left" : "top";
  var isNegated = (direction == "up" || direction == "left");
  if (isNegated) {
    distance *= -1;
  }
  var elStyle = window.getComputedStyle(element);
  var value = elStyle.getPropertyValue(topOrLeft).replace("px", "");
  var destination = Number(value) + distance;
  var frameDistance = distance / (duration / 10);

  function moveAFrame() {

    elStyle = window.getComputedStyle(element);
    value = elStyle.getPropertyValue(topOrLeft).replace("px", "");
    
    var newLocation = Number(value) + frameDistance;
    var beyondDestination = ((!isNegated && newLocation >= destination) || (isNegated && newLocation <= destination));

    if (beyondDestination) {
      element.style[topOrLeft] = destination + "px";
      clearInterval(movingFrames);
    } else {
      element.style[topOrLeft] = newLocation + "px";
    }
  }
  var movingFrames = setInterval(moveAFrame, 10);
}

var canvas = document.getElementById('circle');

var circle = canvas

function draw() {
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var X = canvas.width / 2;
    var Y = canvas.height / 2;
    var R = 50;
    ctx.beginPath();
    ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
    ctx.lineWidth = 3;
    ctx.strokeStyle = '#FF00FF';
    ctx.stroke();

  }
}
draw()
move(circle, "right", 20, 200) //move function

canvas {
  border: 1px solid red;
  position: absolute;
}

<canvas id="circle" width="400" height="200"></canvas>