Develop Reference

Raphael transparent element onclick

How can I make a fill of the transparent element in Raphael clickable? After specifying fill:"none" for an element (e.g. rect) only a frame is clickable. I need to put fill:"none" in order to make other elements from previous layers visible.

In SVG you would normally use pointer-events, but Raphael does not support them (as there's no equivalent in VML). The way to accomplish clickable transparent fills in Raphael is to specify a fill with zero transparency with a transparent fill, i.e. fill: "rgba(0,0,0,0)" or specify any fill and then fill-transparency: 0.

Changing the Color of a div

I have two div elements, with different colors, the first one have for example red color and the second one have blue color, so now, I want to change the color of div with red to blue color, so how could I do it with javascript?

here you go: if you want to animate the change, do it in css
https://jsfiddle.net/5tbfw1wu/
document.getElementById("toRed").style.backgroundColor = "red";

Different stroke of polygon SVG

How to set stroke color in SVG polygon with different colors? for example we have quadrangle and have to set 2 stroke red and 2 stroke black

Draw 2 paths. Make one path the red parts of the polygon and the other the black.

copy non transparent pixels only to HTML5 canvas

I am writing a colouring game for small children, where I have a black and white image shown on a canvas initially, and as the user moves the drawing tool (mouse) over the canvas, the black and white surface gets over-painted with the colour information from the corresponding coloured image.
In particular, on every mouse move I need to copy a circular area from the coloured image to my canvas. The edge of the circle should be a little blurry to better immitate the qualities of a real drawing tool.
The question is how to accomplish this?
One way I see is to use a clipping region, but this approach does not let me have blurry edges. Or does it?
So I was thinking about using an alpha mask to do that and copy only pixels that correspond to the pixels in the mask that have non zero alpha. Is it feasible?

My suggestion is to have your drawable canvas in front of the coloured image you wish to reveal. (You could use your coloured image as a CSS background image for the canvas.)
Initially have the canvas containing the black and white image with 100% opacity. Then, when you draw, actually erase the contents of the canvas to show the image behind.
Like this:
var pos_x, pos_y, circle_radius; // initialise these appropriately
context.globalCompositeOperation = 'destination-out';
context.fillStyle = "rgba(0,0,0, 1.0)";
// And "draw" a circle (actually erase it to reveal the background image)
context.beginPath();
context.arc(pos_x, pos_y, circle_radius, 0, Math.PI*2);
context.fill();

I would probably use multiple clipping regions with varying alpha (one dab for each) to mimic the effect you are after. Render the low opacity one first (paste using drawImage) and render the rest after that till you reach alpha=1.0.

Have you considered using radial gradients that go from an opaque color to a fully transparent one?
Here is a demo from Mozilla. The circles are drawn the way you need. - https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html

processing.js rect() different border colors

I'm drawing a game grid with rect() and I'd like some borders of my rectangle have different colors.
exemple: I'd like a rectangle with left and right borders green but top and bottom borders blue, do you see a way ?
Thanks

You can't color rect borders differently, but you can retrace your rect with separate lines:
stroke(0,0,255);
rect(50,50,100,100);
stroke(0,255,0);
line(50,50,50,150);
line(150,50,150,150);