Generally speaking, what you’re looking for is a homography—a planar perspective transformation—between the field’s ideal rectangle and its image. I highly recommend that you look through the graphics libraries that you’re using. Many have built-in library functions for constructing such a transformation. That will save you some work and allow you to draw other things besides a grid onto the image as well as map points on the image back to the ideal rectangle, which is handy for selection. If you need to construct this for yourself, this answer has a very nice description of how to do so.
If all you really need to do is draw a grid, though, there’s a possibly simpler method that uses cross-ratios: given four points $a$, $b$, $c$ and $d$ on a line, the quantity $$(a,b;c,d) = {[a,c][b,d]\over[a,d][b,c]}$$ is invariant under projective transformations of the line. (Here, the notation $[p,q]$ denotes the determinant of the matrix with the homogeneous coordinates of points $p$ and $q$ as its rows or columns.) You can use this invariant to map the distance along the edge of the field into a distance in the image.
Let’s say $\lambda$ is the proportion of the distance along a side of the field at which you want to place the end of a grid line. Form the cross-ratio $$(\lambda,0;1,\infty) = {\begin{vmatrix}\lambda&1\\1&1\end{vmatrix} \begin{vmatrix}0&1\\1&0\end{vmatrix} \over \begin{vmatrix}\lambda&1\\1&0\end{vmatrix} \begin{vmatrix}0&1\\1&1\end{vmatrix}} = 1-\lambda.$$ Besides the two endpoints $P_0$ and $P_1$ of the corresponding line segment in the image, you’ll also need the vanishing point $P_\infty$ of the lines parallel to it. This will be the intersection of the extension of the image of the field edge with the extension of the image of the opposite edge. Call the distance between the endpoints $d$ and the distance from the image of the “start” corner to the vanishing point $v$. (Note that $v$ might be negative.) The corresponding cross-ratio for the image is $$(\mu,0;d,v) = {\begin{vmatrix}\mu&1\\d&1\end{vmatrix} \begin{vmatrix}0&1\\v&1\end{vmatrix} \over \begin{vmatrix}\mu&1\\v&1\end{vmatrix} \begin{vmatrix}0&1\\d&1\end{vmatrix}} = {v(\mu-d)\over d(\mu-v)}.$$ Equating the two cross-ratios and solving for $\mu$ gives $$\mu = {d v \lambda \over v+d(\lambda-1)}.$$ Dividing this by $d$ gives you the proportion of the distance between the two endpoints in the image, so the image point that corresponds to the proportion $\lambda$ is $$\left(1-\frac \mu d\right)P_0+\frac \mu d P_1.$$ In particular, if $\lambda=\frac k4$, then this becomes $${(k-4)(d-v) P_0 + k v P_1 \over (k-4)d+4v}.$$
