Question

I can’t find out how to get actual drawing cursor position after moveTo(). Check out my code:

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

ctx.beginPath();
ctx.moveTo(10, 20);
// here i want to get from "ctx" actual offset
ctx.lineTo(20,30);
ctx.closePath();

Is there any way or I have to store offset in my own variables offsetX, offsetY ?

Answer 1

I assume you mean you have a bunch of relative path commands and you want to move them.

For instance, to draw a triangle at the top-left you would write:

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,0);
ctx.lineTo(50,100);
ctx.closePath(); // makes the last line for you
ctx.stroke();

So what if you want to use the same path but draw the triangle starting at (175, 175) instead? Instead of changing your moveTo and all subsequent drawing command, all you have to do is translate the context.

ctx.save();
ctx.translate(175, 175);

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,0);
ctx.lineTo(50,100);
ctx.closePath(); // makes the last line for you
ctx.stroke();

// save/restore lets you undo the translation so the next object starts at (0,0)
// you could just call ctx.translate(-175, -175); at the end instead though
ctx.restore(); 

Translating the context changes the origin of the drawing surface, and allows you to move all of your coordinates (temporarily or not) with it. This means you can define a bunch of paths and redraw them using the same commands all over the place using ctx.translate.

See both triangles here:

http://jsfiddle.net/qzYFC/