We Keep Coding

Javascript image manipulation - coloring mask ideas and solutions

I have question related with coloring image (mask) in Javascript. I am looking for technologies stack, libraries, ideas which help mi with my issue. I plan to write JS app which allow user to color part of image, I mean that if you have fence image, you could color the wood. I will have image and mask (transparent image with black places where color should be placed). Application should give possibility to change saturation of placed color on image (te texture should be more or less visible depend on color category) and adding additional texture on mask where color will be placed for e.g. changin wood grain.
Can you tell me which approach will be better? Should I use third-party library (e.g. WebGL like pixi or three js) or simply canvas and iterating though pixels and manipulate them, e.g. making average color by taking R and G and B value of image pixel and destination color (but I see problems with putting textures and saturation). Or maybe you will have some other ideas?
I don't know that I described problem clearly. If you have some questions, please ask and I answer it.
Thanks!

Drag and drop different shaped over an image

I am doing one task and in that I want to drag and drop the different dynamically shaped [like : circle, rectangle, oval, etc] over an image. Like
In this picture you can see that how the rectangle shape has drag and drop over an image. This type of features I want in my task. I have search this features in many websites but nothing I have to seen which I want. So is there any jquery plugin or any javascript then please suggest me or give me some hint.
Advance In Thanks.

Highlight text and a polygon shape on an image simultaneously

I am trying to achieve an effect similar to this site:
only instead of the mouseover function putting a border around the corresponding image, I want to simply highlight different parts of the image by drawing a polygon with defined coordinates over the image.
I have a test of my site up at:
http://perfectdays.ca/image-map/
I used a plugin called ImageMapper in Wordpress to create the image map as you see it on the site. Right now, when you mouseover the arms, for example, the arm regions on the image are highlighted.
I cannot figure out how to a)have the corresponding text on the left get highlighted when you mouseover the arms, or vice versa (and more importantly), have the arms highlight when you mouseover the text "Full Arms."
There was a somewhat similar post called Javascript Newbie: How to highlight text and image in different divs on mouseover.
However I cannot figure out how to adapt that to include the highlighting of certain parts of the image without using the plugin mentioned above.
Any help is much appreciated.

Are you able to put this in your area tags?
onmouseover="highlight(this.id);"
Then you can just make a simple javascript function that changes the class of the corresponding link.

How to make image fit in the edge? html5 canvas javascript

http://i.stack.imgur.com/4oAYt.png
This is original when not insert image. it has blank image
http://i.stack.imgur.com/aupwr.png
i want to know how to make the image curve fit the edge (in red circle the image is fit in edge).
what the framework can do this?
raphaeljs
fabricjs
kineticjs
Thank everyone for help me. sorry for bad english.
Best Regard.

Around a square corner
You can use shearing transforms to give the illusion that a rectangular image is being shaped around corners. Shearing transforms are how you would put your rectangular logo image on a rectangular “3d” box. For “shearing” effects you can use any of the good libraries you mention…or even just use canvas itself. However , shearing effects give you sharp creased edge transforms rather than curved transforms. Here’s an example: http://www.createjs.com/#!/EaselJS/demos/transform
Around a curved corner
But for truly curved transforms, you will need webGL or an image processing library that does perspective transforms.
Check out the server based ImageMagick tool and in particular look at the 3d Boxes, Perspective Layering section on this page: http://www.imagemagick.org/Usage/distorts/#methods
Quoting the imagemagick.org page:
This image was created by taking a [rectangular] image of a anime
video box cover, splitting up that cover into 3 segments ('cover',
'spine', and 'back'), distorting each separately, into layered images.
The image was then finished by the addition of highlights and shading
effects (using HardLight image composition), and the addition of
border and semi-transparent shadow effects (using CopyOpacity).
You can also do this in Photoshop--probably much easier ;)
Bring your logo image and your phone case into Photoshop on separate layers.
Use “Free Transform” to rotate your image to the same angle as the phone case.
Use “Warp” in “Custom” mode to wrap the image around the phone case (the grid helps guide you).
There’s not much lighting in your phone case, but use “Blending” in the overlay mode to have your transformed image take on the highlights of the phone case.

Hovering over different segments in a circle

I am currently trying to create a blue, circular, pie-chart-esque image for my website. The circle will be split into 6 different segments.
What I want to happen is that when the user hovers over a particular segment, this segment will turn orange, and some text will appear beside the circle corresponding to that segment.
I have found some resources online which achieve nearly the effect I need using CSS image maps. http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/ However, these techniques split up an image using rectangles. If I were splitting up a circular object I would prefer to split up the area based on particular arcs.
I assume this is beyond the reach of pure HTML and CSS. I do not have a great deal of experience with web languages, although I have had passing experience with JQuery. What are the techniques I need to solve my problem and what technology would be best to implement it?

you can create image maps that are not rectangular, but use polygon shapes.
this useful tool http://www.image-maps.com/ will let you achieve what you are looking for, without having to write your own polygon mapping!

A few options:
HTML image map
It's simple to create an HTML image map that comes very close to the shape of each slice of the circle, but there are limitations to HTML images maps. For instance, you can't nest content inside each slice of the image map (as an easy way to implement a hover pop-up). If an HTML image map is adequate for you, it's the simplest solution.
CSS image map
To define circle-slice shapes, a CSS image map is impractical, unless you only need a very-rough approximation of the hotspots for each circle slice. But if you could live with that, you'd have a lot more flexibility as far as the functionality.
onmousemove
You could also get the mouse coordinates with an onmousemove event handler for the entire circle, and then do your own calculations to determine which circle slice the mouse is in. This allows you to accurately define the hotspots for each circle slice, and you'd have more flexibility than with an HTML image map. But the calculations may take a little work.

I have a solution for this using mainly HTML and CSS with a tiny bit of jQuery to handle the showing of the text by the side of the circle.
It does however use some CSS properties that are not very widely supported such as pointer-events
JSFiddle Demo