Develop Reference

How to automate a image in canvas from selenium?

In my project, I need to click on an image drawn in the canvas. I am able to do it with coordinates. But that is not the right way to do, because each time different images with different size, gets loaded. So sometimes there will be empty space around the image on canvas depending on the height and width of that image. And this image cannot be located through DOM. Is there any way for Selenium to find the boundaries of these images which gets loaded(dynamic)? So that I can mouse click within the image.
xord = Integer.parseInt(ExcelUtils.getnumData(i, 5));
yord = Integer.parseInt(ExcelUtils.getnumData(i, 6));
new Actions(driver).moveToElement(target, xord, yord).click().perform();
More details on project:
This page has a canvas on which image gets loaded.
Test scenario is to select a dropdown, which will load the image on this canvas.
In positive test case, mouse click anywhere inside the image.
In negative test case, mouse click anywhere outside the image within canvas space.

HTML5 Best way to define coordinates for parts of an image, that when someone clicks on that we can find which part clicked

I am new to HTML5 and i have working on converting simple flash game to HTML5. What i have to do is, i am having an image of a character, so i have define the parts of the image in such a way that when user clicks on the head it should say you have clicked on head, and if some one click e.g on hand it should say you have clicked on hand or it is clicked in the face of the character.
I have done googling and find we can define different shapes and i have drawn and got successfull
So i just want to know that in my image what should i have to do, i have to use images for different parts or i have to draw character using HTML5 bezierCurveTo function.
Please tell me the best way and how can i do that.
Thanks

You can do it either with Images, SVG Elements, or Canvas.
If you have Images or SVG Elements, you can hook the onclick event of the Image to tell when it is clicked. Images will be the rectangular bounding box of the image, but SVG Elements will be the tight bounds. Use document.getElementById(<id>) to get the element from your page.
If you are using Canvas, you can use also use onclick but inside the callback, you can use CanvasRenderingContext2D.isPointInPath() to see if the point is in the head. This will allow you to check the exact bounds of the head, not just the rectangle around the head.
canvas.onclick = function(event) {
context.beginPath();
// Recreate the head path here.
if (context.isPointInPath(event.offsetX, event.offsetY)) {
// Click was within the head
}
};

Image map coordinates for different browsers

I am trying to create an image map, where I define on the images coordinates that are links to the some other pages. Now the problem I am facing is that the position of coordinates is not relative.
If the image is on a different browser or in a different screen size, then the coordinates are not preserved. I mean a link which was at a particular place in the image is now on some other place of image.
Can anyone provide a piece of code where I can have some relative positioning where even the browser size or the image size will change the coordinates position also with it.
I tried to user percentage tags like COORDSCALE "50%,50%" but it seems like a wrong attribute for the Area tag. Even this COORDSCALE="ABSOLUTE|RELATIVE" is also not working.
First of all, are these the right attributes? Is there a possibility of relative positioning? Any CSS, or Javascript code will be great.

Wrap the image with div that has relative position. Inside it use absolutely positioned elements to imitate the same thing imagemap is supposed to do.
Google "CSS image map" to find more information about the technique.

JavaScript Click and Drag function

I'm trying to build an interactive map and I'm looking for information on how to have a click and drag in one window, affect an image in its parent window.
As this is hard to explain if you visit http://liamg.co.uk/map/map.html you will see a small window/map in the top left, Id like to be able to drag a small window around the map and have that move the larger/zoomed in image, does this make sense?
Any information/help is greatly appreciated!

jquery supports drag n drop elements, see here: http://jqueryui.com/demos/draggable/
you have to set the right boundaries, and then add an event that performs on drop in which you will read the position of the dropped element and can then apply it to the map however you want to.
The right example you want is this: http://jqueryui.com/demos/draggable/constrain-movement.html
The first one in the box has the boundaries of the box.
And here you see how to react on the drop: http://jqueryui.com/demos/draggable/events.html

I think what you need is not exactly a drag event, you want a element moving only inside the little map, yeah?
Let me explain:
1- Add a listener to mouse down, up and move to that little map;
2- When flag mousedown is true, mousemove works changing a position of a square div around the little map (showing what portion of image the user is seeing). Use pageX and Y (coordinates);
3- Make the math by size of the portion div and size of the big overflowed with the full map to show the exactly zoomed portion of the map.
I belive drag is really implemented when your move a think around all the document, or using the drop event. But it's what I think.

Add another image on top of a drawn image on canvas, then have it respond to onclick event, is it possible?

Here's a canvas app I come across : canvasphoto (uses YUI 2 I believe, which I haven't used before). It displays images on a canvas and it lets you resize/move the images across the canvas. What I want to do is to add a close button on the top right side of the images drawn on the canvas and have it trigger an onclick event when clicked (I'd display a confirm button asking the user if he/she wants to remove the image).
Is this possible? If so, can you help me get started on this (resource/link for drawing an image on top of another image drawn on a canvas, basic canvas manipulation, etc.) Thanks!
Edit: solved the part where the image rendered will respond to click (on top right corner only). So, the only problem left is drawing the close button on the top right corner of the image.

There is no way for something drawn into a canvas to respond to events without additional work. Either you can store the position of the close box and have an onclick event on the canvas check if the click occurs within the rectangle, or you could place an element over the canvas where the rectangle has been drawn and use that to handle the click. A relatively positioned div with no contents would work.

Instead of drawing on the corkboard, a div with an image is rendered on the page above the top right corner of the image by setting a higher z-index than the canvas and and absolute position (with the coordinates of the top right corner, of course).