Home/ Questions/Q 3403606
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T05:16:53+00:00

I want to draw a variable number of equidistant points on a HTML5 canvas

  • 0

I want to draw a variable number of equidistant points on a HTML5 canvas element, using JavaScript. How do I calculate the X/Y position of each point?

EDIT:

I want the distance from one point to its direct neighbours and to the edges of the canvas to be the same.
If I had an 8px x 8px canvas and 4 points, the distace from a point to it’s direct neighbours and to the edges of the canvas would be 2px.
But what if i had an uneven number of points and not a square canvas?
(i think an image might help to understand my problem a little better)

equidistant points

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d recommend building a simple constraint solver – using relaxation to arrive at the answer you want. This is similar to the technique used by some Visio-like applications. Basically, you can add spring forces between the pairs of points and the boundaries of the canvas. You simulate for a short amount of time, and everything will ‘settle’ into place.

    You could try Box2DJS – a simple javascript physics system. Or read up on Verlet integration / constraints – it’s pretty simple to get up and running, and great for these kinds of applications.

    • 0