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).
Related
I'm trying to create a coloring book using EaselJS similar to this example:
https://github.com/CreateJS/EaselJS/blob/master/examples/CurveTo.html
However, I have discontinuous shapes I want users to color, and I want to hide paint strokes outside the shapes while allowing them to initiate a stroke outside of the shape. If they do start drawing outside the allowed space, I still want the part of the path within boundaries to be displayed.
to see what i mean click here
My first idea is to use a full canvas and cover the parts not colorable with an svg filled with the background color, but that would involve having to pass a click event on the svg to the same pixel on the canvas it's covering.
Is there a better approach?
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 have a canvas where I'm drawing a line using setInterval so it's animated. Right now it starts at 20,20 and end the animation at 200,20. Ideally I'd want the point on the canvas to never move, so it would look like the line is drawing but the canvas is moving. Best example would be a car that is driving that stays in frame while the background moves or think Mission Impossible where you follow the burning fuse as it burns.
is there a method to move the whole line? This way I can move the line to the left as I add to the line. If not would it be better to make a huge canvas and move it to the left as the line draws? What's the best way to create an animation like this?
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.
So if I draw a circle on HTML5 canvas, I want to make it so that the user can click somewhere in the canvas and the circle of a given radius will move gradually to the point mouseclicked on the canvas. I know jquery has the animate function, but since the canvas does not have a DOM, I am not sure how to accomplish this.
You will need to continuously repaint the canvas in a loop. A canvas is just a bunch of pixel data. If you want something to animate you have to draw each frame.
First clear the canvas to white (or any other color). Calculate the new position for the circle. Draw it. Wait for a short amount of time. Repeat.