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.
Related
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).
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?
I currently have an issue whereby changing the fillStyle of a canvas is causing a smooth diagonal line to turn jagged and I don't know why.
I've created a JSBin where you can see the effect here: http://jsbin.com/fadeyiva/1/edit
I've set the background colour to black so you can more easily see the canvas and the jagged edge. The grey shape is the canvas, if you scroll down to the bottom of the page and then back up it should trigger the waypoint and change the canvas colour to orange.
However, if you look at the bottom diagonal line it starts off smooth when it's grey but when it changes colour the edge becomes very jagged. I don't know why this is happening because the code is only changing the fillStyle, it's not altering the shape of the canvas at all.
The reason is because your angled box is originally being drawn in your canvas with respect to dithering (this is taken care of natively). When you apply a fill change as you are, you throw out the idea of dithering and simply make every single pixel of the object the same color. The edges of the object need to blend with the background (thats what dithering means).
I suggest instead of just adjusting the fill value of the object, redraw the entire object as you did in your window.onload() function. Because you are calling a redraw, the browser will force the dithering on the object and adjust it for the new color.
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.