html - When drawing on a canvas, should calculations be done relative to cartesian plane coordinates? -

i've been seeing lot of canvas-graphics-related javascript projects , libraries lately , wondering how handle coordinate system. when drawing shapes , vectors on canvas, points calculated based on cartesian plane , converted canvas, or calculated directly canvas?

i tried playing around drawing circle graphing tangent lines until line intersections start resemble curve , found difference between cartesian planes i'm familiar , coordinate system used web browsers confusing. function circle, example, "y^2 + x^2 = r^2" need translated "(y-1)^2 + (x-1)^2 = r^2" seen on canvas. , negative slopes positive slopes on canvas , upside down :/ .

the easiest way me think pretend origin of cartesian plane in center of canvas , adjust coordinates accordingly. on 500 x 500 canvas, center 250,250, if ended point @ 50,50, drawn @ (250 + 50, 250 - 50) = (300, 200).

i feeling i'm over-complicating this, can't wrap mind around clean way work canvas.

current practice can perhaps exemplified quote david flanagan's book "javascript : definitive guide", says that

certain canvas operations , attributes (such extracting raw pixel values , setting shadow offsets) use default coordinate system

(the default coordinate system of canvas). , continues with

in canvas operations, when specify coordinates of point, taken point in current coordinate system [that's example cartesian plane mentioned, @walkerneo], not in default coordinate system.

why using "current coordinate system" more useful using directly canvas c.s. ?

first , foremost, believe, because independent of canvas itself, tied screen (more specifically, default coordinate system dimensions expressed in pixels). using instance cartesian (orthogonal) coordinate system makes easy (well, me too, :-d ) specify drawing in terms of want draw, leaving task of how draw transformations offered canvas api. in particular, can express dimensions in natural units of drawing, , perform scale , translation fit (or not, case may be...) drawing canvas.

furthermore, using transformations clearer way build drawing since allows "farther" underlying coord system , specify drawing in terms of higher level operations ('scale', 'rotate', 'translate' , more general 'transform'). abovementioned book gives nice exemple of power of approach, drawing koch (fractal) snowflake in many fewer lines possible (if @ all) using canvas coordinates.