How to draw multiple paths for a moving image on canvas

Question

I´m just beginning to learn Html5 canvas, the main idea is to make an image move through multiple lines, creating paths, the total distance of the lines should be 10km, so i will be using 10 lines of 1km, using a javascript prompt, the user will say how many km or mts the image will advance. I think i´ll have to draw ten paths of lines, making the path of the image, but i still don´t know how to move the image through all the lines.

The following code, move the image once, with no line to follow, this is what i have so far:

$(function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
    window.setTimeout(callback, 1000 / 60);
};
var pathArray = []; var enx = prompt("coordenada en x");
var eny = prompt("coordenada en y");
var num1 = parseInt(enx);
var num2 = parseInt(eny);

// Coordenada inicial
pathArray.push({
x: 50,
y: 50
});
pathArray.push({
x: num1,
y: num2
 });


var polypoints = makePolyPoints(pathArray);

var width = 2;
var height = 5;
var position = 0;
var speed = 2;
animate();

var fps = 60;

function animate() {
setTimeout(function () {
    requestAnimFrame(animate);

    // calcular nueva posicion
    position += speed;
    if (position > polypoints.length - 1) {
        return;
    }
    var pt = polypoints[position];


    // dibujar
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.beginPath();
    ctx.translate(pt.x, pt.y);
    // Objeto de la imagen del corredor
    img = new Image();
    // url de imagen
    img.src = "img/mono_animar.png";
    ctx.drawImage(img,0,0);
    ctx.restore();

}, 1000 / fps);
}

function makePolyPoints(pathArray)
{
var points = [];

for (var i = 1; i < pathArray.length; i++) {
    var startPt = pathArray[i - 1];
    var endPt = pathArray[i];
    var dx = endPt.x - startPt.x;
    var dy = endPt.y - startPt.y;
    for (var n = 0; n <= 100; n++)
    {
        var x = startPt.x + dx * n / 100;
        var y = startPt.y + dy * n / 100;
        points.push({
            x: x,
            y: y
        });
    }
}
return (points);}});

But i need something like this:

http://jsfiddle.net/ExpertSystem/qxgkc/ Except that the user will type a number from 1 to 12km in order to move the image along the path lines.

Do you have any code that I can go off of? Can you please help us visualize what you are trying to do? Plus, your description of your question isn't a question. Is your question... How do I make images move along a line? — ahitt6345, Nov 22 '15 at 05:08
That´s exactly what i need, to move an image along a line, composed by multiple paths, like a zig zag pattern — Ricardo Gonzalez, Nov 22 '15 at 07:13
Sorry about that, that´s exactly the question, how do I make an image move along a line pattern — Ricardo Gonzalez, Nov 22 '15 at 07:44
possible duplicate of [I want to do animation of an object along a particular path](http://stackoverflow.com/questions/17083580/i-want-to-do-animation-of-an-object-along-a-particular-path) (already used my close vote...) — Kaiido, Nov 22 '15 at 09:32

score 0 · Accepted Answer · edited May 23 '17 at 12:23

You could, in the draw loop implement a "line drawing algorithm" that does not exactly draw a line but draws an item at a place where that point would be.

function line(x0, y0, x1, y1){
     var dx = Math.abs(x1-x0);
     var dy = Math.abs(y1-y0);
     var sx = (x0 < x1) ? 1 : -1;
     var sy = (y0 < y1) ? 1 : -1;
     var err = dx-dy;

     while(true){ // put draw loop here.
         drawImage(image,x0,y0);//setPixel(x0,y0);  // Do what you need to for this

         if ((x0==x1) && (y0==y1)) break;
             var e2 = 2*err;
             if (e2 >-dy){ err -= dy; x0  += sx; }
             if (e2 < dx){ err += dx; y0  += sy; }
    }
}

code taken from: Bresenham algorithm in Javascript

I would suggest using a library like p5.js to do something like this. http://p5js.org

How to draw multiple paths for a moving image on canvas

1 Answers1