CODEWITHSUNDEEP
javascripthtmlcanvas
The KNVB
The KNVB

Reputation: 3844

How can I change the starting point and end point location of a html5 canvas line?

I can draw line with the following code successfully:

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();

Is it possible to change the start point or end point location(i.e. coordinate) of the line? Do I need to clear the whole context? I want to the mouse to drag either end for drawing a circle or sector.

Upvotes: 0

Views: 2239

Answers (1)

taile
taile

Reputation: 2776

You can use translate to move your canvas to (x, y)

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.translate(50, 50); // move to (50, 50)
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();

Upvotes: 1

Related Questions