Js Canvas Draw Circle Around Point
Note: Before reading this tutorial you should familiar with the Canvas API. It is simply the best tutorial on HTML5 canvas.
The problem
Even if HTML5 offers support to draw lines, rectangles and other basic shapes, information technology lacks the choice to paint a unmarried point. Point support is vital as is the base of any geometrical organization.
At that place are a few pick to simulate a point in HTML5 and here they are:
Solution 1: Draw as tiny line
The basic option is to pigment information technology as very small line. Let's say we want to pigment a point at (x,y) coordinates. If you place a grid on canvas so the coordinates on canvas are the intersection of the grid organization.
In the prototype bellow if you want to paint the point at (two,1) you will like to pain the cerise highlighted pixel but when you specify (2, 1) as coordinates in sheet context it will refer to the grid intersection at (2, 1) 
Here is the lawmaking that does that:
ctx.beginPath(); ctx.moveTo(two,1); ctx.lineTo(iii,2); ctx.stroke();
A lot complications can appear considering:
- the geometrical coordinates we were taught in math is a footling different than the one in canvass
- this is a solution to paint a pixel my moving to South East but we can have similar solutions by moving South West or Due north West and so on. Also we can make the number of pixels smaller by painting but North, S, West or E...but this is more close to painting the point equally a rectangle.
- On the edges of the canvas you lot are not able to paint a line anymore as it might become out of sheet paint surface. Ex: a canvas of 400x400 and you want to pigment at (400,1); equally (401,ii) point is not nowadays on canvas surface the line will be missing (or better said, even if painted not visible)
Yous can find the whole code for here ( point-as-line.html)
Solution 2: Draw as a tiny rectangle
Another option is to pigment the signal as rectangle with 1x1 dimension. The lawmaking is very similar to the one of "Draw as tiny line". Too the bug are like
You simply draw a rectangle from point (two,1) with the width of 1 pixel and height of 1 pixel.
ctx.strokeRect(ii,1,ane,one);
simply a meliorate way is to utilise fill option as this will force the render engine to pain Just one pixel - the inner one - instead of walking on the edges of the rectangle and practice approximations.
ctx.fillRect(two,i,1,1);
Y'all can find the whole code for here ( point-as-rectangle.html)
Solution 3: Depict as tiny circle
We can besides pigment a point as pocket-sized circle or ellipse. Every bit a circle has a radius we need to pick the smallest ane which is 1 pixel so we will have a circle with one equally radius which ways that the diameter will be 2 pixels - not such a nice idea.
Here is the code for this
ctx.beginPath(); ctx.arc(2, 1, ane, 0, 2 * Math.PI, true); ctx.stroke();
A meliorate way to do it - similar to rectangle - is to make full the circumvolve and let the render engine option only the inner pixel(s).
ctx.beginPath(); ctx.arc(two, 1, ane, 0, 2 * Math.PI, true); ctx.fill();
You can find the whole lawmaking for hither ( point-as-circumvolve.html)
General problems with these solutions
Nigh of these problems are problems we encountered when we developed the basic geometrical kernel for Diagramo - and so they are existent problems.
Zoom In / Out
One of the biggest problem with this solution appear when you want to zoom a point. If that bespeak is a circle and you zoom in, that circle has to be filled, otherwise I will render as an empty circumvolve - a thing you do not want to happen.
Storage of point
If you have an animation, you need to keep track of the points position over time - so you need to store those positions and transformations. For that you will need to utilise some form of data construction to save the Point for afterwards usage and be able to proper render information technology.
Skew / misconstrue figure
Fortunately the signal can grow/compress only it can not exist distorted - a betoken volition be a point non matter what transformations y'all volition use to it. Betoken, in geometry, does not have whatever dimension so it's allowed to transformations ... only in canvas / second information technology is usually a pixel.
We picked the circumvolve / arc solution as is the most flexible and people unremarkably think well-nigh points in terms of very modest dots - even that is geometrically incorrect :)
Source: http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api/