Draw Rectangle for scattered points - javascript

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:

Related

how to draw svg line in any shape in javascript?

Im trying to implement a function where user can draw svg line in any shape as he provides the x and y coordinates .
for eg - draw a svg line in green color as the user moves his mouse on screen

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.

how to choose random x,y coordinates of a polygon

I have a shape, a polygon. I have the x,y coordinates of the edges of this polygon.
I'd like to draw 50 circles of 10 pixel radius randomly in this shape.
How do I randomly choose a position in my polygon?
I'm doing this in canvas with javascript, but I don't need any actual code. Maybe some math equations or some direction would be enough
You'd get the whole area of the polygon , apply a rand function on it and draw the circles, if you need to avoid intersection you could create a 'collision' function. Perhaps this helps:
Set: https://en.wikipedia.org/wiki/Set_%28mathematics%29
Calculating the area of a polygon: http://www.wikihow.com/Calculate-the-Area-of-a-Polygon

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.

Draw a Rectangle and then draw a scale down Rectangle inside previous Rectangle

How to draw sale down rectangle inside another rectangle? Let say I have coordinates of a rectangle which is transformed at position x,y. Now, I need to draw a scale down rectangle inside the previous recangle, Just like this,
http://www.uploadimage.co.uk/thumbs/849968trim%20Rect.png
The idea is simple, if you have the outer rectangle coordinates you must take the following steps:
find the center of the outer rectangle
move outer rectangle so that its center will coincide with origin (0,0)
scale the edge coordinates of outer rectangle by a ratio (ex: 0.7)
compute inner rectangle coordinates
move both outer and inner rectangle back in position
If you know a little bit of math you can actually combine all those transformation into a single one so it will be faster.

Categories

Resources