Помогите! canvas оси координат
 

k=0;
t=0;
var ctx = document.getElementById('cnv').getContext('2d');
ctx.beginPath();
ctx.translate(400,400);
arr2=[-4,-15,-4,131,12,149,12,1,121,1,106,-14,-4,-15];
for(var i=0; i<arr2.length; i++) {
  sum=i%2;
  if (t==0){
    if (k == 1 || k == 0){
      if (sum==0){
        x=parseInt(arr2[i]);
     }
      else{
        y=parseInt(arr2[i]); 
        ctx.moveTo(x,y);
      }
  
    }

    if (k == 2 || k == 3){
      if (sum==0){
        x=parseInt(arr2[i]);
      }
      else{
        y=parseInt(arr2[i]);
        ctx.lineTo(x,y);
        t=1;
      }
    }
  }
  else{
    if (sum==0){
      x=parseInt(arr2[i-2]);
      x1= parseInt(arr2[i]);
    }
    else{
      y= parseInt(arr2[i-2]); 
      y1= parseInt(arr2[i]);
      ctx.moveTo(x,y);
      ctx.lineTo(x1,y1);
    }
     
  }
  k++;
  if (k>3)k=0;
}

    ctx.stroke();

прошу сильно не пинать , а если есть возможность подсказать. Подскажите пожалуйста как перевернуть данный чертёж так как он нарисован вверх ногами. проблема в том что здесь оси начинаются с левого верхнего угла, а мне необходимо сделать что бы начинались с левого нижнего угла .

огромное спасибо, всё работает

еще один вопрос, кто может обьяснить как перенести алгоритм выбора координат с кода делфи в мой код.Если необходимо могу выслать полностью программу на делфи.
Вот сам код

unit Unit1;

interface

uses
Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
Dialogs, Menus, ExtCtrls, Grids, DBGrids, DB, ADODB, StdCtrls;

type
TForm1 = class(TForm)
Panel1: TPanel;
MainMenu1: TMainMenu;
N1: TMenuItem;
PipesGrid: TDBGrid;
Opendlg: TOpenDialog;
NodesGrid: TDBGrid;
Edit1: TEdit;
Button1: TButton;
Image1: TImage;
N5: TMenuItem;
N3: TMenuItem;
N6: TMenuItem;
N7: TMenuItem;
N8: TMenuItem;
N9: TMenuItem;
N10: TMenuItem;
N11: TMenuItem;
procedure N4Click(Sender: TObject);
procedure N2Click(Sender: TObject);
procedure Button1Click(Sender: TObject);
procedure N5Click(Sender: TObject);
procedure Image1MouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
procedure Edit1KeyPress(Sender: TObject; var Key: Char);
procedure N6Click(Sender: TObject);
private
{ Private declarations }

public
{ Public declarations }
end;


pips = record
id:Integer;
LType:Integer;
nod1:Integer;
nod2:integer;
end;
nods = record
id:Integer;
Ntype:integer;
x:Real;
y:Real;
i2:Integer;
end;
xy = record
xp:Integer;
yp:Integer;
end;

var
pipemas:array[0..2000] of pips;
nodmas:array[0..2000] of nods;
maxpip,maxnod,old:integer;
n1fild,n2fild,n3fild:integer;
Form1: TForm1;
constr:WideString;

implementation
uses Unit2,Unit_Glavn, Unit3;
{$R *.dfm}
procedure drawnod(n:Integer);
var Xmin,Ymin,Xmax,Ymax,dxm,dym,km,dxw,dyw,kw,m:real;
i,xi,yi:integer;
const b0=20;
begin
xmax:=nodmas[1].x;
ymax:=nodmas[1].y;
xmin:=nodmas[1].x;
ymin:=nodmas[1].y;
for i:=1 to maxnod do
with nodmas[i] do
begin
if x>xmax then xmax:=x;
if y>ymax then ymax:=y;
if x<xmin then xmin:=x;
if y<ymin then ymin:=y;
end;
dxm:=xmax-xmin;
dym:=ymax-ymin;
km:=dym/dxm;
dxw:=Form1.image1.Width-2*b0;
dyw:=Form1.image1.Height-2*b0;
kw:=Form1.image1.Height/Form1.image1.Width;
if km>kw then m:=dyw/dym else m:=dxw/dxm;
i:=n;
begin
xi:=round(b0+(nodmas[i].x-xmin)*m);
yi:=round(b0+(Form1.image1.Height-2*b0)-(nodmas[i].y-ymin)*m);
with Form1.image1.Canvas do
begin
if nodmas[i].Ntype=1 then
begin
Pen.Color:=clgreen;
brush.Color:=clgreen;
Ellipse(xi-3,yi-3,xi+3,yi+3);
end;
end;
end;
end;

procedure drawpip(n:integer;c:longint);
var Xmin,Ymin,Xmax,Ymax,dxm,dym,km,dxw,dyw,kw,m:real;
i,j,xi,yi,xc,yc,y1,x1,x2,y2,n1,n2:integer;
const b0=20;
begin
xmax:=nodmas[1].x;
ymax:=nodmas[1].y;
xmin:=nodmas[1].x;
ymin:=nodmas[1].y;
for i:=1 to maxnod do
with nodmas[i] do
begin
if x>xmax then xmax:=x;
if y>ymax then ymax:=y;
if x<xmin then xmin:=x;
if y<ymin then ymin:=y;
end;
dxm:=xmax-xmin;
dym:=ymax-ymin;
km:=dym/dxm;
dxw:=Form1.image1.Width-2*b0;
dyw:=Form1.image1.Height-2*b0;
kw:=Form1.image1.Height/Form1.image1.Width;
if km>kw then m:=dyw/dym else m:=dxw/dxm;
i:=n;
begin
with Form1.image1.canvas do
begin
pen.Color:=c;
for j:=1 to maxnod do if nodmas[j].id=pipemas[i].nod1 then n1:=j;
x1:=round(b0+(nodmas[n1].x-xmin)*m);
y1:=round(b0+(Form1.image1.Height-2*b0)-(nodmas[n1].y-ymin)*m);
moveto(x1,y1);
for j:=1 to maxnod do
begin
if nodmas[j].i2 = pipemas[i].id then
lineto(round(b0+(nodmas[j].x-xmin)*m),
round(b0+(Form1.image1.Height-2*b0)-(nodmas[j].y-ymin)*m));
end;
for j:=1 to maxnod do if nodmas[j].id=pipemas[i].nod2 then n2:=j;
x2:=round(b0+(nodmas[n2].x-xmin)*m);
y2:=round(b0+(Form1.image1.Height-2*b0)-(nodmas[n2].y-ymin)*m);
lineto(x2,y2);
if pipemas[i].LType = 3 then
begin
xc:=(x1+x2)div 2;
yc:=(y1+y2) div 2;
pen.Color:=clRed;
brush.Color:=clRed;
ellipse(xc-5,yc-5,xc+5,yc+5);
end;
end;
end;
end;
procedure TForm1.N4Click(Sender: TObject);
begin
close;
end;

procedure TForm1.N2Click(Sender: TObject);
var i:integer;
begin
openDlg.InitialDir := ExtractFilePath(Application.ExeName);
if OpenDlg.Execute then
begin
Form1.Caption:=opendlg.filename;
constr:='Provider=Microsoft.Jet.OLEDB.4.0;Data Source='+opendlg.FileName+';Persist Security Info=False';
with dbmod do
begin
pipesTable.Active:=False;
nodTable.Active:=False;
pipesTable.ConnectionString:=Constr;
nodTable.ConnectionString:=Constr;
pipesTable.Filtered:=false;
nodTable.Filtered:=false;
pipesTable.Active:=true;
nodTable.Active:=true;
nodTable.First;
maxnod:=nodTable.RecordCount;
for i:=1 to maxnod do
begin
with nodmas[i] do
begin
id:=nodTableID.AsInteger;
Ntype:=nodTableNODETYPE.AsInteger;
x:=nodTableX.AsFloat;
y:=nodTableY.AsFloat;
i2:=nodTableI2.AsInteger;
end;
nodTable.Next;
end;
pipesTable.First;
maxpip:=pipesTable.RecordCount;
for i:=1 to maxpip do
begin
with pipemas[i] do
begin
id:=pipesTableID.AsInteger;
Ltype:=pipesTableLINKTYPE.AsInteger;
nod1:=pipesTableNODE1.AsInteger;
nod2:=pipesTableNODE2.AsInteger;
end;
pipesTable.Next;
end;
pipestable.First;
nodtable.First;
image1.Canvas.Brush.Color:=clwhite;
image1.Canvas.Rectangle(0,0,image1.Width,image1.He ight);
for i:=1 to maxnod do drawnod(i);
for i:=1 to maxpip do drawpip(i,clBlue);


end;
end;

end;


procedure TForm1.Button1Click(Sender: TObject);
var i,k:integer;
begin
for i:=1 to maxpip do
begin
if pipemas[i].id=StrToInt(Edit1.Text) then
begin
dbmod.pipesTable.filter:='id='+quotedstr(edit1.tex t);
n1fild:=dbmod.pipestable.fieldvalues['node1'];
n2fild:=dbmod.pipestable.fieldvalues['node2'];
dbmod.nodTable.filter:='id='+quotedstr(inttostr(n1 fild))+' or '+'id='+quotedstr(inttostr(n2fild));
dbmod.pipesTable.Filtered:=true;
dbmod.nodTable.Filtered:=true;
drawpip(i,clred);
if (Old <> 0) and (old <> i) then drawpip(old,clblue);
old:=i;
end;
end;
end;

procedure TForm1.N5Click(Sender: TObject);
begin
form2.show;
end;

procedure TForm1.Image1MouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);

var Xmin,Ymin,Xmax,Ymax,dxm,dym,km,dxw,dyw,kw,m,md,ta, d,lo,l,nx,ny,nx2,ny2:real;
z,i,j,k,p,xi,yi,xc,yc,y1,x1,x2,y2,n1,n2:integer;
a:array[1..50] of xy;
const b0=20;
begin
if (Button=mbLeft) and (dbmod.pipesTable.Active=true) then
begin
xmax:=nodmas[1].x;
ymax:=nodmas[1].y;
xmin:=nodmas[1].x;
ymin:=nodmas[1].y;
for i:=1 to maxnod do
with nodmas[i] do
begin
if x>xmax then xmax:=x;
if y>ymax then ymax:=y;
if x<xmin then xmin:=x;
if y<ymin then ymin:=y;
end;
dxm:=xmax-xmin;
dym:=ymax-ymin;
km:=dym/dxm;
dxw:=Form1.image1.Width-2*b0;
dyw:=Form1.image1.Height-2*b0;
kw:=Form1.image1.Height/Form1.image1.Width;
if km>kw then m:=dyw/dym else m:=dxw/dxm;
md:=1000;
d:=1000;
for i:=1 to maxpip do
begin
k:=1;
for j:=1 to maxnod do if nodmas[j].id=pipemas[i].nod1 then n1:=j;
x1:=round(b0+(nodmas[n1].x-xmin)*m);
y1:=round(b0+(Form1.image1.Height-2*b0)-(nodmas[n1].y-ymin)*m);
a[k].xp:=x1;
a[k].yp:=y1;
for z:=1 to maxnod do
if (nodmas[z].i2 = pipemas[i].id) then
begin
k:=k+1;
a[k].xp:=round(b0+(nodmas[z].x-xmin)*m);
a[k].yp:=round(b0+(Form1.image1.Height-2*b0)-(nodmas[z].y-ymin)*m);
end;
for j:=1 to maxnod do
if nodmas[j].id=pipemas[i].nod2 then n2:=j;
x2:=round(b0+(nodmas[n2].x-xmin)*m);
y2:=round(b0+(Form1.image1.Height-2*b0)-(nodmas[n2].y-ymin)*m);
k:=k+1;
a[k].xp:=x2;
a[k].yp:=y2;
for j:=1 to k-1 do
begin
lo:=sqrt(sqr(a[j+1].xp-a[j].xp)+sqr(a[j+1].yp-a[j].yp));
nx:=(a[j+1].xp-a[j].xp)/lo;
ny:=(a[j+1].yp-a[j].yp)/lo;
nx2:=(-1)*ny;
ny2:=nx;
l:=abs(((x-a[j].xp)*ny2+(y-a[j].yp)*nx2)/(-nx*ny2+ny*nx2));
ta:=abs(((y-a[j].yp)*nx-(x-a[j].xp)*ny)/(-nx*ny2+ny*nx2));
if (ta<d)and (l>0) and (l<lo) then
begin
d:=ta;
p:=i;
end;
end;
end;
edit1.Text:=inttostr(pipemas[p].id);
Button1.Click;
end;
end;

procedure TForm1.Edit1KeyPress(Sender: TObject; var Key: Char);
begin
case Key of
'0'..'9': ;
#8 : ;
#13 : Button1.Click;
else Key :=Chr(0);
end;
end;

procedure TForm1.N6Click(Sender: TObject);
begin
{form3.Button2.Click;}
form3.Show;
end;

end.

Здесь код только первого unita насколько я понимаю то здесь весь алгоритм выборки координат из базы и отрисовки