I working on HTML Canvas library to construct a "PIE Chart" Now to finish it I need the
given section of PIE Chart to Zoom or Slice once clicked on the section.
I almost done with the PIE Chart with the above exception only
Please do not recommend me to use any charting library available already
What you want cannot directly be done: when you draw on the canvas, you paint pixels that instantly dry onto the canvas. If you want to "zoom in" you'll have to erase the canvas (ctx.clearRect(...)) and re-paint your pie chart using more pixels. This is what a non-retained drawing mode (or immediate drawing mode) graphics API like Canvas requires.
Contrast this with SVG, a retained drawing mode graphics system, where the commands to draw content result in elements being created that you may track events for, adjust properties on, and see the visual results updated for you.
You can "zoom in"--redraw your pie chart larger--either by changing your drawing commands (bigger arc radius, lineWidth, etc.) or by transforming your context (changing the scale and translation) and then issuing the same drawing commands again.
There is also one non-option: if you leave the width and height attributes of the canvas unchanged but change the CSS to height and width properties you can 'zoom in' on your canvas without re-drawing. This is going to cause each virtual pixel on the canvas to grow on your screen, however, resulting in pixelation.
Related
We are designing an experience in Spark AR Studio and have run into a conundrum. Basically, our goal is to pin a Rectangle element containing an image texture so that it always lies just above the effect picker UI in Instagram across all devices, as in the placement in this image:
Goal Placement
We are attempting to accomplish this via pinning the Rectangle item item to the bottom and left side of a Canvas element set to Camera Space and Safe Touch Area. This seems to create a successful positioning like in the Goal Image on some devices, but on others (especially the iPhone 8 and iPhone 11) the image is still partially obscured by the UI, which is counter to our goal.
Here is our scene setup:
Rectangle element properties
The Rectangle element in the Scene panel
The Rectangle's position in the 2D Scene editor
An example of undesired behavior:
The Rectangle is obscured by the Effect UI
We have also tried to achieve this via placing the Rectangle dynamically using the Device Insets patch, but this also seems to not help and only provides an accurate pinning above the UI in some circumstances.
Any advice is greatly appreciated!
Is it possible to get the color (rgb-value and transparency) of a point (x/y-coordinate) from the canvas? Example: I draw some figures and text on a canvas and later I want to get the color of a point at a specific coordinate.
The solution should be independent whether the canvas is visible on screen or not. And it should work independently from the operating system.
I didn't found any solution on the web. That's why I assume that this is not possible. Am I right?
The canvas isn't very pixel-based, and provides no API for doing this.
But if you've got the tkimg package installed, you can use that to do a screengrab of the canvas and then fetch the pixel value out of that.
package require Img
# Get the data into an image
set screengrab [image create photo -format window -data $theCanvas]
# Read the pixel data out of the grabbed image
set pixeldata [$screengrab get $x $y]
# Get rid of the grabbed data once you're done
image delete $screengrab
Note that the coordinates concerned will be viewport coordinates, not canvas internal coordinates: if you've scrolled the canvas, you'll have to offset as necessary.
You are correct, tk does not provide any way to get the color of a specific pixel on a canvas.
so what I want to achieve is drawing a rectangle with either a color/fillRect or with clearRect and then copy it to the other canvas layer under the one I was drawing on. Also I want to set a background to this layer with opacity.
What I've tried is setting background with fillStyle and fillRect and it went fine. Also I could draw the rectangle with fillRect on the upper canvas which had no background and then copy the rectangle to the other one with drawImage.
Problem was when I tried to create a rectangle with clearRect and copy it. As I noticed I can only clearRect with another rectangle. But then I have to set a background to the upper canvas, which is ok, but when I copy it to the other one it gets darker and darker every time (well of course..)
So how is this possible?
When you work with alpha channel you will as you already noticed accumulate alpha channel values as long as alpha < 255. The only way to "reset" this is to start fresh so-to-speak.
Here are a couple of options to get around this -
Option 1
Don't copy anything from the draft canvas to the main canvas but store all points and shapes into a 2-dimensional array or an array consisting of the shape objects with its points, color, line width and so forth.
When you need to update the main canvas, clear both canvases and then re-render all the shapes to the main one.
Option 2
If all shapes on the main canvas is suppose to have the same opacity then use a third off-screen canvas. Draw everything to this canvas non-transparent (this last is important).
When updating main canvas clear it, set globalAlpha on it and then draw the off-screen canvas to it.
So we'll probably need some example code, because I'm not 100% sure what your trying to do... your using 2 canvas objects, drawing on the top canvas, and copying that to the bottom canvas... something like?:
ctx2.drawImage(canvas1,0,0);
then your clearing the top canvas:
ctx1.clearRect(0,0,canvas1.width,canvas1.height);
and doing your draw routine again? are you trying to get some sort of trail effect or something?
I only want to show a portion of a shape drawn on a canvas.
My line is essentially this, and it works fine:
ctx.fillRect( xPosition, rectHeight - offsetV , rectWidth, rectHeight);
The second variable there is going to be negative. So, my quesiton is: is it bad practice (or am I setting myself for errors down the road) to draw a path that starts off the canvas (with a negative coordinate) and then continue drawing on to the canvas.
No problem at all. If you have very large number of drawing object you can (like GameAlchemist said) prevent drawing that object .If you use canvas like map for explore (zoom out/in ctx, translate whole context) that preventing draw can cost more that clip cost. And its complicated ...
I have some expire with drawing object out of canvas. You can have a problem if you put calculation and other (no drawing) staff intro draw function.
Important :
-Make canvas draw function code clear(only draw canvas code).
-If your app no need for const update make update call only when it needs.
-Clear canvas only in (0,0,canvas.w,canvas.h)
-Use style only when it needs (stroke,fill,font etc.)
I'm working on a game that allows players to click on a card and drag it across the screen in any random direction. There are a total of 64 100x80 overlapping cards on a 800x800 canvas at any one time and each one is a procedural draw. As some of you probably suspect, canvas doesn't like redrawing that entire canvas for every move. To work around this, I'm utilizing a buffer canvas to draw the card and then attempting to paint that buffer canvas to the main canvas using drawImage(). To ensure there is no drawing buildup, I clear the region of the canvas associated with where I plan to drawImage() using a clearRect().
The problem I'm experiencing is that because the (x,y) coordinates used for the clearRect() and drawImage() are coming from the location of the mouse, if the user moves too fast, the coordinates will differ from the time drawImage() was last executed to the time clearRect() is called during the next draw sequence. The result is residual draw from the last sequence - proportionate to how fast the card is being dragged.
I tried maintaining the (x,y) coordinates from the drawImage() and using those (instead of the current mouse location) for the clearRect() in the next sequence. However, now instead of residual draw being shown, residual we have residual clear (erase).
Thoughts on how I can address this?
NOTE: My animation rate is handled using RequestAnimationFrame and not SetInterval().
Assuming your canvas is static during the drag drop operation, a pretty easy way to get a good increase in performance would be to just cache the rendering.
In other words, when a drag drop operation begins, save the current canvas into another one. Stop all rendering except for the one involved with dragging the card. Now, whenever you need to repaint, simply repaint from your copy-canvas. Since you're basically just copying from one to another, it should be pretty fast.
On each processing cycle, you would take the current position of the dragged card, fill that with data from the copy, then redraw the dragged card in the new position.
Other approaches you could try would be to use some kind of a placeholder for the drag. For example, consider using a same-sized DIV which you display while dragging. This should have the benefit of not requiring to touch the canvas while dragging and thus also run a better performance for it.