How to draw a grid inside a rhombus?

Question

JavaScript

I know that the solution is probably banal, but my mathematical knowledge is not enough to come to it on my own. There is a rhombus that is drawn in the canvas from the center point of an imaginary circle using the formula x + r * cos(i * PI / 2), y + r * sin (i * PI / 2), where (x, y) are the coordinates of the center of this circle and r is its radius. It is necessary to draw a grid inside the rhombus, while it should not go beyond it. In my head it looks like getting lines parallel to the axes, the only question is how to "gradually" reduce them, how to get these points belonging to the rhombus in order to use them as parameters for lineTo, moveTo?

Answer 1

If the angles of the rhombus are right, then

const x:integer=100;
      y:integer=220;
      r:integer=70;
      step:integer=5;
var i,ds,di:integer;
begin
ds:=trunc(r*sqrt(2));
for i:=0 to ds do
    if i mod step = 0 then
       begin
       di:=ds-i;
       PaintBox1.Canvas.MoveTo(x-di,y-i);
       PaintBox1.Canvas.LineTo(x+di,y-i);
       PaintBox1.Canvas.MoveTo(x-di,y+i);
       PaintBox1.Canvas.LineTo(x+di,y+i);
       PaintBox1.Canvas.MoveTo(x-i,y-di);
       PaintBox1.Canvas.LineTo(x-i,y+di);
       PaintBox1.Canvas.MoveTo(x+i,y-di);
       PaintBox1.Canvas.LineTo(x+i,y+di);
       end;
end;

Answer 2

Perhaps it makes sense to look in the direction of patterns:
https://www.w3schools.com/tags/canvas_createpattern.asp