Develop Reference

Konva-JS: how do you get the updated vertices coordinates for custom shape after translation, scale or rotation?

I'm using React-Konva (React version of KonvaJS) to draw custom shapes, mostly irregular polygons, and apply transformations to it, like moving them around, scaling and rotating.
Now, once the polygons are in place I need the coordinate of the vertices for another feature, but even though I move it around and transform and whatnot, the shape appears correctly modified but the vertices coordinates are still the initial ones.
For instance if I have a triangle at (0,0), (1,0), (0.5,2) and then drag it all the way to the right, after the drag ended the triangle will appear in the new position on the canva, but when printing the vertices it still will output (0,0), (1,0), (0.5,2).
How do you get the updated coordinates of all the vertices? I'm using the Shape class for the polygons with draggable set to true for the translation, and the Transformer class for scaling and rotating.

Canvas, and therefore Konva which is a wrapper & enhancer of canvas functionality, uses vector graphics. An important part of vector graphics is the concept of 'transform'-ing your shapes when you rotate or scale them. Essentially, the shape will tell you its position is unchanged when rotated or scaled, but the important fact is it's transform which is what does the rotation and scaling.
Long story short, without needing to understand the matrix math, you can 'get' the transform that is applied to your shape and give it the x,y positions of your shape's vertices/corners, and it will return the x,y of that point with the transform applied.
Here is an earlier answer to the same question but regarding rectangles. https://stackoverflow.com/a/65645262/7073944
This is vanilla JS but hopefully you can react-ify it.
The critical functions are node.getTransform and its close relation node.getAbsoluteTransform methods will retrieve the transform applied to the node (shape).

Canvas: reset pixels taken into consideration for composite operation

I am currently trying to build a relatively complex application using HTML5 Canvas objects and JS. To efficiently and realistically color areas I want to generate shadow maps based on image masks.
My problem is that the project is highly interactive, and I want to be as efficient as possible - so if anyhow possible I want to stay in one canvas. What I would now like to do is kinda "reset" the pixels taken into consideration for composite operations, so I can draw everything I want to draw onto my canvas, "reset" it (NOT clearing!), draw my mask and draw my shadow map (e. g. using source-in) on top of it.
Is this anyhow possible, or will I have to use a second canvas for this purpose?
Thanks!

Can this sequence be done in HTML5?

I certainly don't expect anyone to actually provide a working solution for this. My question at this point is a simple one: can this be done with an HTML5 canvas, or would I be spinning my wheels in the attempt?
I'm a programmer, but my forte is in PHP, JavaScript, traditional HTML, etc. ...I haven't had a chance to play with HTML5 yet.
The elements you see in the example, I can save out as individually as necessary. So to make the blocks rotate around the center, I was thinking I save a square image with the block in the appropriate corner, respectively. Then rotating the image would pivot around center appropriately, unless you can set a point of origin on an image a la PhotoShop.
The KineticJS library looks promising for this type of animation as well, but I'll leave the recommendations to you fine folks.
Anyway, here is the example I want to replicate:

I won't give any library recommendations for the same reasons that #Diodeus points out, but maybe I can help your selection process. What you're trying to do can be done multiple ways in the browser right now: Canvas, SVG, and/or CSS3 animations.
Your example above is basically a few vector graphics composed together with a gradient on your center "pie timer". Because of this I would lean towards using S V G, especially if you want to allow interactions with your component (each SVG element can have event handlers).
The canvas element is better for "pixel by pixel" control of your visual content on the page. Adding content in the canvas doesn't grow the DOM (like with SVG) so it will normally perform better, but you lose things like native event handlers and animations that you will end up having to re-implement on your own.
More about the choice between SVG and Canvas, and an SVG animation example
Once you have the components in the page, they'll need to be wired up and animated. The animation can be broken down into:
Scaling
Background color fading
Rotation
"Weird gradient pie timer" example with CSS3
These can be done with CSS animations, SVG animations, or with plain old javascript. The choice depends on what you'll be animating. If I was selecting a library I would want to find one that tried to use the newer methods (SVG/CSS3) when it can, and gracefully degrade when it cannot.
I would be weary of libraries that try to re-implement things that are already available natively in the browser. Relying more on the browser instead of your own code to do things like animations means that the browser can optimize its operations and use things like hardware acceleration to improve your performance.
Hopefully this can aid your library selection. Remember, libraries come and go all the time so don't get too attached to one. An ideal implementation should allow for you to easily swap out your animation or display code without having to touch other unrelated pieces.

Sure, it's not all that difficult when you break it down into pieces.
Here are some technologies and techniques to get you started.
You use Canvas by (1) displaying some drawings, (2) erasing, (3) displaying some new drawings
When you do this redrawing rapidly, you get animated effects like your image shows.
Html Canvas uses a context to draw with (think of it as the pen for the canvas)
drawing a path: context.beginPath + context.moveTo + context.lineTo will define a path that creates your "fan blade" polygons. You can use context.fillStyle to fill the polygons with you colors.
fading: context.globalAlpha will change the opacity of new drawings
rotating: context.translate(centerX,centerY) + context.rotate(radianAngle) will rotate new drawings (like your rotating polygons, your tick-marks, )
scaling: context.translate(centerX,centerY) + context.scale(scaleX,scaleY) will scale your polygons.
arcs: context.arc(centerX,centerY,radius,beginningAngle,endingAngle) will draw an arc with a specified centerpoint and sweeping from a beginning angle to an ending angle.
math: circleCircumferenceX = centerX+radius*Math.cos(radianAngle) circleCircumferenceY = centerY+radius*Math.sin(radianAngle) uses trigonometry to calculate an xy coordinate on the circumference of a circle. You can combine this trig + Math.random to place your "speckles" in an arc around your centerpoint.

Freeform drawing over an image using <canvas> and javascript

I have been trying to find a good resource to point me in the correct direction and I'd really like someone to help me in this regard.
I'm developing an app that uses phonegap, js and html5. One component of this app is to have an image that can be overlayed with freeform scribbles.
I'm not sure if its the canvas object I should be using and if so how do I go about implementing a drawing solution.

You create a and position it absolute over image.
can have transparent pixels (alpha=1.0) and those pixels will display the underlying image.
Then you flip pixels accordingly your scribbling to black etc. You need to listen to touch events, transform their coordinates to coordinates and then use canvas.getContext() draw operation to manipulate pixels hitting in those coordinates.
If you need further assistance please ask individual questions for each part as a complete solution would be longish source code and outside the scope of simply answering the questions.

Raphael cumulative vs absolute scaling/rotation/translation?

I'm trying to draw an interactive map in Javascript, using Raphael to do the heavy lifting.
The map background is a fairly complicated thing containing a grid, the map elements, labels, etc. On top of this I'm then going to draw the stuff the user is actually working with. Because the background is complex, I don't want to have to rerender it every frame. So, after drawing it I would like to reuse those drawing elements, merely changing the translation, rotation, scaling of the background as the user pans, zooms, etc.
Unfortunately I'm rather confused by Raphael's transformation primitives: they're not behaving as I would expect. If I call scale(), the scaling appears to apply to the original size of the drawing element; but translate() is cumulative, so it applies to the previous translation. rotate() can be either, as it has an option I can set...
Is it possible to do absolute translation? That is, to be able to specify the absolute coordinates of the new center of my objects (which are usually paths)? Failing that, is keeping track of the old location so I can apply a delta when I want to move it to the new location a reasonable way of doing this?
Or would I be better off simply rerendering the whole thing every frame? (I see suggestions that Raphael isn't good at transformations of complex drawings, as most of it is done in Javascript; looking at the SVG that's being produced, I see that the translation appears to be getting backed into the path data, which would bear this out...)
(BTW, FWIW I'm using the GWT Raphael interface for all this.)

You can use Element.attr to set absolute positions. Just change x and y properties:
myElement.attr("x", myX);
myElement.attr("y", myY);

I've used the raphael-zpd plugin with success. I'm not sure if that will plug into GWT - you could check out their source code and adapt it to your use case.
Project: https://github.com/somnidea/raphael-zpd
Source: https://github.com/somnidea/raphael-zpd/blob/master/raphael-zpd.js