We Keep Coding

Multiple plots on page rezoom when resizing one

I have about 10 plots on a page all dynamically created. To save space they all start out small and users can press a button to "enlarge" them when they want to look at one closer. In both small and large modes users can zoom and manipulate however they want, but when a user zooms on one plot then toggles the size of another plot, the plot they are resizing "snaps" to the zoom profile of the first plot.
Hopefully I didn't explain that too confusingly. Here's a snippet of the code doing the resizing.
$(document.getElementById(expArr[index])).click( function() {
$(gd).toggleClass('clk');
Plotly.Plots.resize(gd);
});
expArr just holds the id of the buttons as they are dynamically created in the codebehind and gd holds the div that the plot is in. Toggleing the class of the div just changes the class that holds height/width.
All of the resizing works fine. It's just when you resize one plot and zoom, then resize a second plot, the second plot "snaps" to the zoom done on the first plot.

I figured out what I was doing wrong. I'm sure if I would have posted more code someone would have noticed my mistake.
Basically I was using a function with a loop in it to draw all my plots on the page, but I had left my layout var outside of all that so it was the same object being reused for each plot. So when I called resize on a plot it saw that layout changed and updated to the new data.
Simply moving layout fixed the problem

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.

Can two jcanvas layer masks exist on the same canvas?

Is it possible to create two layer independent layer masks on the same canvas? I've tried, without much success. I suspect it's due to masks affecting layer indexes.
I've highlighted this by enabling masking on mouseover (see here). If you mouseover a layer mask, the other layer masks disappears. If you draw the layer with mask:true as a property only one layer mask will appear. You might be thinking "why not make a separate canvas for each layer mask?" I can't because I intend on using $("canvas").getCanvasImage(); to render the canvas as a composite jpeg (which would be difficult with two canvases).
The end goal would be a canvas split vertically into two panes. Each pane would be filled with an draggable image. Users would move the image in the pane to "crop" it and then render the result as a composite image. This example comes close, but dragging the green box under the right pane creates a deadspace in that pane.
Thanks for you assistance.

Yes, it's now possible with jCanvas. Just be sure to call the restoreCanvas() method whenever you wish to restore a mask, like so:
$("canvas").restoreCanvas({
layer: true
});
Here's an example I made which uses two masks to split the canvas into two panes.

Can a canvas within a canvas easily be cleared from the main canvas?

I'm currently working on an interface where I have a primary canvas that is 800x800 in size. At the top I've generated a bunch of icons. When a user mouses over the icons at the top, it matches his mouse's x and y coordinates to determine if he is currently hovering over any of the icons. If he is, I want to have a hover effect where a label appears next to the mouse with the name of the icon. As he moves, the label follows the mouse. If he leaves the icon or moves to a different one, the last one is cleared, and either there is no label displayed (if the user moved off all icons), or another label is displayed next to the mouse in the last one's place (if he hovers over another icon, the width of the label is a variable length depending upon the width of the text).
The process of ordering and displaying these icons all occurs within a separate object from the rest of the canvas renderings, thus I wouldn't exactly want to re-render that entire object to display the icons every time a mousemove event triggers, so I'm wondering if there's a way to draw to another "temporary" canvas' context and whether or not that could be easily cleared. as the mouse moves so there isn't any trails left behind on the primary canvas? Can anyone point me in the direction of an example like this or advise me on how I should go about accomplishing this sort of task?

Yes you can certainly draw it onto a temporary (in-memory) canvas. This is done a lot of various reasons, and yours may be valid (especially if you don't have any background that changes). But it may not be the easiest to implement, its hard to say without knowing more about your app.
There's a decent alternative you should consider: you could have two canvases that are 800x800 in size overlaid atop each-other. This can be useful for some applications (like games) where there is a background, foreground, and middle-ground that all have different moving parts (but the background parts move rarely, and foreground isn't always present, etc)
In the same way, you could "layer" your canvas app, with the icons being on one canvas, and the background and other parts of the app being on the other canvas.

Click on different transparent PNG's. Which one is clicked?

I am trying to create a map of a country, divided in different provinces. When my products are available in a certain provinces, these provinces will light up on the map. I then want people to be able to select one province and click on it.
I'm thinking of doing it like this:
1) I have a background of the complete country in dark colors
2) Every province has a separate transparent png in a light color
3) When my database detects a product is available, it will show the background image + the light color image of each province
The problem is: I want the light color image to be clickable, but the canvas of all the images will overlap. Is there any way to accomplish this ? It should work in all major browsers, and preferably NOT with image maps. I would like to link the clickable area to the non-transparent part of the PNG image.
I hope this makes a bit sense, many thanks in advance.

An option is to just create your world image, and another hittest image, where all provinces are a different color. When the user clicks somewhere, you can just get the color of the clicked pixel, and relate that back to the province. So your hittest image would, for example, have Texas as red, California as blue and New York as Green. When you click you just have to figure the color out, and there you have your state.
As for getting the pixel color under the mouse, canvas can do that. However thats not supported in < IE8, perhaps you can look into explorercanvas. Otherwise you could do it serverside, just do an AJAX request to your page with the (relative!)x/y on click, your backend can figure it out then.

You can register click only on whole images, not colored parts of it. To have your map accurate you'll have to use canvas or flash.

<img> tag is clickable by it's square size, doesn't matter if part of image is transparent. Even if you click on transparent part of image, the click event will occur.
To couter-act that, take a lok at HTML IMAGE MAP <area> HTML tag (google it) and optionally tell the browser what part of image do you want to apply some event.
Click will also propaginate to bottom elements at the same position. This means that <body> is always clicked, if you don't stop propagination with e.stopPropagination();
If you don't want image maps, you can place invisible DIVs on the top in the shape of the clickable area. But I'd probably go with image maps.