Help me:
I have a canvas. There are some shapes inside this canvas, these shapes are changing at random over time and they are different types(like: triangle, parallelogram, trapezium, square, circle etc). There are also some blank space/area in that canvas left after these shapes rendered each time.
Now how can I calculate that area of blank space of that canvas after each time those shapes are rendered at random?
Subtract the areas of the shapes from the canvas area.
If the shapes do not overlap this is the requested area.
If the shapes overlap you could calculate the overlaps add these back to the previously found area.
If it is too difficult to calculate the areas and overlaps you could go brute force and render the canvas to a bitmap and count colored pixels.
Related
I want to know how to resize a rectangle by dragging it's edges when the rectangle is rotated by a certain angle in HTML canvas.
https://shihn.ca/posts/2020/resizing-rotated-elements/ this link which is a potential solution for this problem but I am not able to understand the math behind it.
I have different sized DIV elements. For ex, it can be a rectangle or a square. Rectangle can have either height is bigger than the width or vice-versa. What I want to achieve is, I want to draw a Square around those elements so that I can convert them to Circle using CSS. See the image
I have tried to get diagonal length and draw the required square. But I am failing to position it properly around the rectangle shaped DIV.
See the images below: I want to draw SQUARE around highlighted rectangles.
Basically I have some movable shapes, and the ability to draw. When a user erases a drawing (drawing white over their drawing), I don't want them to be able to draw over the movable shapes.
Right now the only solution I can think of if to check every-time the eraser moves to see if it is colliding with a shape and just not draw white.
The problems I see with this solution:
Having to check every single shape every single time the eraser moves sounds like it will slow things down.
When I move the shapes around (and the canvas redraws) the white eraser drawings will appear over the shapes (so that part of the shape appears erased).
So I have a circle that is being drawn on a canvas, it changes size according to a setting. However, if the setting is set too high, the circle is bigger than it's reserved area, and overlaps other things in the canvas.
I'm currently erasing the area surrounding the box after it is drawn, but it causes difficulties. I basically have to draw everything around it twice because I need the circle to be drawn last. This makes it more difficult to implement click actions in said surrounding area, because the click is registered twice.
TL;RD: How could I mask out part of a circle before I draw it on the canvas?
For this you can use the clip() function.
context.rect(50,50,200,200);//the area in which the circle is to be drawn
context.save();//saved context so it can be restored later
context.clip();
//now draw your circle
context.restore(); //remove the clip
Only the area inside the given rectangle is drawn.
Here is a good tutorial on the subject.
I am rotating an image with shape(e.g. Rectangle, Circle etc).
On rotation value 0, i can draw all my shapes on mouse move smoothly.
but on rotation value(e.g 90,180,270 means greater than o) :- On apply rotation i am rotating image and shapes simultaneously. But when i am trying to draw any shape, drawing is happen directionlessly. If am moving annotation from left to right then shape is drawing from right to left, from top to bottom to "bottom to top"..
I am rotating both canvas image as well as for shapes.
I have tried a lots from my side. But i am finding way to do this.
Thanks In Advance