Develop Reference

FabricJS How to make exact Circle Boundary

I want to create exact Circle Boundary in order to create drag & drop quiz. By dragging and dropping the red circle to purple or blue circle or both areas as shown in the image below:
The quiz
The problem is the purple or blue circle has rectangle boundary when I used red circle to drag and drop and detect that within circle area by isContainedWithinObject function, as shown below:
The rectangle boundary
How to create exact circle boundary like this:
The exact boundary

Draw circle subscribed to a polygon

We have a polygon with an irregular form (in example, a city boundaries polygon).
We need to draw a "circle" with a defined radius (ie, 4km) bound to this polygon, in other words, if point at 4km fall outside the polygon, we need to keep the polygon point as point.
I've attached a sample image, the red border is our polygon, the blue circle is what we need to get. As you can see, the blu circle doesn't exceed the polygon boundaries.
Any help?

Use floodfill algorithm to make a set of points inside the shape, then paint points form the set which are not further form center of circle than its radius.

Draw Rectangle for scattered points

I have some scattered points for which I need to draw a rectangle / circle / polygon as a background. I have only coordinates (x,y) of selected points.what will be the maths formula to this? These points are inside canvas and I need to draw the outer shape for selected points in canvas itself. Tried with canvas rect .
Attaching one more image:

Finding non transparent filled areas in images on javascript canvas

I've an image with some filled circles, rectangles etc. I want to find x1,x2, y1, y2 areas of filled areas.
Javascript Method to detect area of a PNG that is not transparent
Accepted answers works fine but i need to find each areas separately. As in the image below, i need thee x1, x2, y1, y2 positions. Do you have any ideas?

Here's an outline to get you started:
Use context.getImageData to get the pixel data from the canvas,
Scan the pixel data for the first non-transparent pixel,
Use the "marching squares" algorithm to find the border path points around the circle or rectangle: Draw border around nontransparent part of image on canvas,
Iterate the path points and find the [minX,minY] & [maxX,maxY]. This the bounding box of the circle or rectangle.
Erase the bounding box area calculated in step#4 so that you can look for the next shape.
Go back to step#1 until you've determined the bounding boxes of all non-transparent shapes on the canvas.

Check the color of a rectangle drawn on a HTML5 canvas and make sure not to draw a circle over it

Lets say I draw a rectangle on the html canvas:
draw.rect(x, y, w, h, color); // color red
After I draw the rectangle I will draw a circle on the same canvas:
draw.circle(x, y, d, color); // color green
I have to randomly generate the coordinates for the circle.
Both draw functions are inside a loop - set interval - and a clear canvas function.
I am wondering if there is a way to make sure I won't draw the circle over the rectangle.
In a normal situation that would be easy, just remember the last coordinates of the rectangle and choose different ones for the circle - but for other reasons I cannot do it.
Would it be possible to check the canvas for the color of the rectangle which was drew on it, and make sure the circle will not be drawn over that color?
I know how to analyze the color of a background image, but I don't know if the above is possible.
For background images I use:
ctx.getImageData()

You will always be able to store the last drawn coordinates.
At least by using a glval var. which you can make not-so ugly
by using a namespace :
window.myApp = {};
myApp.lastDrawnRect = { x:-1, y:0, w:0, h:0 };
myApp.storeRect= function(x,y,w,h) {
var rect = myApp.lastDrawnRect;
rect.x = x; rect.y = y; rect.w = w;
}
and when you draw your rect you can store the coordinates :
raw.rect(x, y, w, h, color); // color red
myApp.storeRect(x,y,w,h);
You might want to store that the rectangle is not drawn by
taking the convention that x==-1 ===> rectangle cleared.
Then you can use that data when you draw your circle, with
classic boundary checking.

Whatever is drawn on the canvas is accessible using getImageData.
A canvas is a pixel matrix with drawing helpers attached.
Before drawing the circle you can ctx.getImageData(x, y, 1, 1) and check if it's red.
You most probably have to check the pixels on the edge of the circle, not the center.
Start from the circle equation.
It's been discussed before.