We Keep Coding

DrawImage doesn't show CSS styles

I'm trying to draw an img to a canvas. However, styles aren't carrying over, whether I set the style attribute or do it in the CSS.
Here's a JSFiddle showing what I'm trying to do.
I've also tried applying the styles to the canvas itself. This displays correctly, but when I perform canvas.toDataURL(...) it doesn't get the styles.
Is there some other way to apply styles to the generated data?

To apply filters to your canvas content, you can use the cutting-edge filter property, which uses the same syntax the CSS filter property. Before you draw your image, do
context.filter = "grayscale(1)";
And you can reset it for anything else you do in the future by
context.filter = "none";
Your filtered image will remain correctly filtered -- the filter property basically tells the canvas context, "Whatever I draw from now on should have this filter applied," so changes only affect future drawing operations.

How can I change the color of a polygon on mouse hover in Cesium?

I need to make a polygon highlight on mouse hover and restore its color and appearance once the mouse is moved out of the polygon.
I tried this with ScreenSpaceEventType.MOUSE_MOVE event handler but I am not able to restore the appearance when mouse is moved out of polygon in this case.
I tried https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Apps/Sandcastle/gallery/Polygons.html (http://cesiumjs.org/Cesium/Apps/Sandcastle/gallery/polygons.html)
This file in Sancastle. It has inline comments like // For highlighting on mouseover in Sandcastle.
But it is not working as expected.
Is there any way in cesium to achieve this? or am I missing something?

Take a look at the "Picking" example in Sandcastle, and click on the button that says "Drill-down picking."
There are different ways to accomplish what you describe, but the above demo makes use of a Cesium CallbackProperty and provides a callback that will return either the polygon's normal color or the highlight color, depending on the "picked" status. Note that multiple overlapping polygons can be picked at the same time with this method.
The mouse move handler then just controls membership of the pickedEntities list, and the polygons choose appropriate colors for themselves based on their membership in that list.

Is there a way to check if specific point (X,Y) is in the SVG element?

What I need to do is to understand if mouse leaves SVG object (path, i.e it is not a rectangular - can't use just offset, not a circular - can't use radius and center position, etc. ). I can not use mouse leave/enter events because I have a pointer for mouse that is always above all elements. Obviously I also can't just use elementFromPoint - because it gives the top layer element.
So the question:
Is there a way to understand if coordinates (X,Y) are in the specific element $("#element").
UPD:
I uploaded my current code to my website http://pekap.co/example/
I didn't create jsfiddle because I have SVG object to ebmed.
There you can find my JS, svg object I use, etc.
If you go to the svg object it changes its color and pointer appears (orange circle). The goal is to change color of the SVG area whenever we leave it/ enter it and display orange circle under mouse only inside SVG area.
Whereas currently I can accomplish on one of goals (either one with different code)
UPD 2.
Erik Dahlström gave almost perfect solution for me: set pointer-events to none in CSS. I will go for this now, however to make my day perfect it would be great if there was a way to detect when any part of circle is out of the SVG area.

I'm not sure I follow what you mean, the pointer is the little circle that follows the mouse?
If so, then just make that circle have pointer-events: none and it will be "transparent" to mouse events. Note that webkit/safari/chrome/blink doesn't yet support mouseenter and mouseleave so you'll likely need some scriptbased workaround (not sure if D3 does this already).
It should also be possible to do a solution based on using a CSS :hover rule on the path element. Set some property to some value on hover, and then check with getComputedStyle what the property is currently set to on the path element.

My suggestion would be to to create a image map of the area, its a lot of work but this seems to be what you need: http://jsfiddle.net/sb9j7/
<area shape="poly" name="dip" coords="253,102, 277,100, 280,105, 290,107, 295,111, 304,130, 290,140, 287,147, 240,157, 238,159, 227,153, 203,146, 198,125, 200,116, 214,102, 231,102" href="#">
this fiddle is from image mapster

I would like to reposition a circle created through Raphael js, and to use it as a letter in a title

I have created a vector graphic using Raphael JS - specifically a circle.
I would now like to use this circle as the letter "O" in a title. It is also a circle that will animate upon click. I would like to know if this is at all possible.
Here is a fiddle to explain better what I'm trying to say.
The html is very simple:
<h2>N<span id="canvas_cont"></span>OTRE APPROCHE :</h2>
Here is the jsfiddle
Basically the circle will act as the second letter in "Notre", and when clicked will move to the right of the screen. Other things will happen after, but this effect is what I'm trying to get....

Placing the Raphael canvas in a span is clever, but at the end of the day I suspect you'll regret mixing native HTML with Raphael in this way. Doing so would probably require a lot of absolute positioning and z-indexes that are better handled and supported in Raphael.
I recommend you simple draw the text in Raphael:
var text = r.set();
text.push(
r.text(10,20,"N"),
r.text(70,20,"TRE APPROCHE :")
);
text.attr({
'text-anchor': 'start',
'font-size':'36px'
});
If the SVG/VML styling is inadequate, you could also just use an image. Again, I would recommend placing that image on the canvas using Raphael (paper.image());
Note that, in the updated fiddle, I made the canvas a div the width of the logo.
Updated fiddle.

Put Raphael (SVG) canvas behind other divisions to make them clickable?

I am using Raphael to create lines between divisions in an organization chart (or flow chart), but I need to be able to actually click on the divisions and content behind it.
If I could make the canvas be behind the other elements, kind of like a background image, that would be idea. Is this possible?

I found a solution. Raphael makes an SVG canvas that is absolutely positioned in my case. Absolute positions act as layers, and so to be on top of that layer, my content had to be absolutely positioned as well.
If someone else has a better solution, I would be happy to hear it, though this is working fine.

What I do is create a layer of invisible (but clickable) shapes on top of the informational lines being rendered, which will act as the target area for the content below.
If your lower layers being target are being created in Raphael you can easily clone them, set the opacity to 0, and position that layer to the top. (See Sets Reference for a way to easily group the layers together.)
Example:
#el = #parent.paper.rect(x,y,w,h); //your existing lower layer shape definition
#elTrigger = #el.clone(); //clone your existing shape
#elTrigger.attr
fill: '#fff'
opacity: 0
cursor: 'pointer'
#elTrigger.click(someAction); //assign the function
If you're lower layer isn't being rendered by Raphael (just HTML) you could still do something similar, but it would require just creating new (transparent) shapes to sit on top of the approximate coordinate of the targets below.