We Keep Coding

Javascript - How to create an image using canvas based on pixel colors on the site?

I have a site where it has div tags with background colors, and I use relative positioning to move them all together so it looks like an image. I moved them so its exactly on the top left of the page.
How do I create an image out of it, so like if there was a button, when it gets clicked, it creates an image of width 608px and height 105px, and then asks the user if they want to save it or open it or close it (standard download box)?
I would need to get the pixel color starting from index (0,0) right?

Instead of using background images on divs, just draw images onto a canvas. Then take a look at this http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

how to show part of big image on mouse rollover

I want when user roll over on my image it shows a part of big image of the same picture i known its possible in flash but how i don't Known ??
here is the link of the live example the site use the same technique in flash
click here
Thank you in advance

the big image is masked with the magnifier sprite and it's moved according to the position of magnifier (to show the correct part )

Rollover image hides the element below from mouse. How to fix?

Here is an example I've put together to better illustrate this problem:
http://www.saeidmohadjer.com/users/saeid/sandbox/javascript/image_map_rollover/test3/test3.html
When you go from image A area to image B area or reverse, there are locations where the rollover doesn't show because the image map below is covered with transparent area of rollover image. Is there a way to make the rollover image hidden from mouse? In ActionScript I could do this by setting an object's mouseEnable property to false to get it out of the way, but I don't know how I can do this in HTML/JavaScript.
The rollover image (pink) is absolute positioned with a higher z-index above the black & white image. The practical usage is for highlighting floorplans on a floorplate of a building whenever mouse rolls over a floorplan.
Thanks,
Saeid

I don't know if this would work for your situation, but an easy way to do it could be to make your black & white image partially transparent (instead of white) and put the pink image below it (that is, give it a lower z-index). Does that help at all?

image drag using javascript

I have an image which i don't want to drag but i want to get that effect.
for example :- I clicked on the image and without leaving the mouse if I moved the mouse over the whole screen. I don't want the image to move but a blur copy of image should move with my mouse.
regards,

Image color overlay in HTML5 / JS

I have some png vectors with transparent backgrounds that I want to color overlay on the fly, so users can choose a vector and then choose which color they want it from a picker.
Only stipulation is that they cant be masked with background colors, because multiple pngs will be loaded onto the same canvas and will need to overlap.
How exactly do I go about loading an image into a canvas and then overlaying it with a certain color?
Edit: I have found some info here and here ( - answer by Nathan ) which sort of work, but not in all browsers.
The second one especially as I need only the png itself to be overlayed, and the transparencey to stay transparent

Practically you want to load the image into canvas and overlay it with a certain color, that will give a color effect to the overall image.
This jQuery plugin does exactly that, it loads the image into canvas, manipulates the color giving the nice tinting effect and convert it back to image element. Converting this back into image element is a very important part, as some user may style their CSS base on img element, instead of ID or class.
Just play with the interactive demo:
and go through the docs:
Have fun.