html5-canvas move object on line

Question

I want to move a object on a slanting line. I have given my code. In my code in my 3rd div as I move the slider I am drawing a slanting line on this line I want to move an o

Answer 1

You need to add the drawing code at the very end of functions drawSlopeCurve1() and drawSlopeCurve2(). The simplest way is to fix function newSprite() first and then use it (to avoid copying identical code-blocks over and over).

In function newSprite():

// Change that:
ctx.globalCompositeOperation = 'source-atop';

// To this:
ctx.globalCompositeOperation = "source-over";

(For more details on globalCompositeOperation see here.)

At the end of functions drawSlopeCurve1/2():

// Append this:
newSprite(canId, x, y);

See, also, this modified demo.