Develop Reference

Text Direction in Phaser.js

I would like to know if there is any text direction on Phaser.js Text class
like when user input some text, then the text input in the canvas will have a text direction of right to left or left to right;
and I'm implementing this on whole canvas application
example in the normal html we can attain this using the css properties
direction:ltr,
direction:rtl
anyone has any idea on how to do it.
i was reading on the phaser.js text class but cannot find any properties to set the direction to right to left but no luck.
thanks in advance;

Since I can't find any documentation on the phaser to make this happen
then i simply just make a work around to look like i am able to make the direction
of the text to be right align.
Here is a simple text
var txt = this.game.add.text(10, 10, '0', {
font: "21px arial",
fill: "#00FF00",
align:'right',
fontWeight:'bold',
});
compute for the new position x of the txt
formula :
txt.x = contant - txt.width
the constant will be a reference point you want to offset
according to your positioning
so when the variable txt text updated
then you can re-position it again using
the the new data
txt.setText(100);
txt.x = 84 - (txt.width);

it looks like phaser text now supports rtl through this class:
Phaser.GameObjects. TextStyle

Try this:
yourApplication.canvas.setAttribute("dir", "rtl");
... where yourApplication holds the reference to your game/application. This adds an attribute to the DOM canvas element your game/application draws to (if that's what you're after).

Kineticjs text padding interferes with mouseover events

I am trying to tween the color of a Kinetic.Rect when the mouse moves over it. I also have a piece of text defined at the same location. It seems that adding padding to a Kinetic.Text interferes with mouseover events.
I have created a fiddle at http://jsfiddle.net/d5pbK/
I have two padding statements one at line 40 and one at line 45.
The way the fiddle is right now when I move the mouse in the blue rectangle its changes color but if you move the mouse over the horizontal text extents then the rectangle does NOT change color.
Also if you activate any of the padding statements then only when I place the mouse over the orange border, only then does the rectangle change colors.
I would like the rectangle to change colors when the mouse is over it irrespectively of the text.

The Kinetic.Text element takes up the same space as the Kinetic.Rect element when padding is added to the text.
So instead of adding the events to the Kinetic.Rect, add them to the Kinetic.Text
Updated fiddle at: http://jsfiddle.net/MZ57d/

d3.js onmousehover

I wrote this code using d3.js.
Here's my problem:
When you mouse over the rectangles, the pop up tooltip appears, but not when the pointer is over the text within the rectangle.
I would like the tooltip to appear when the mouse is over the text as well as the other parts of the shape. How can this be accomplished?
Here's my code for the rectangle:
cartridgeRectangles.push({"x_axis":startx+2, "y_axis":90+textbeginy, "width":35, "height":15, "color":discovery_status_color, "stroke":"#33CC33", "thickness":1, "mover":chassisDetails , "movercolor":"darkgreen", "mout":"True", "moutcolor":"#33CC33" });

The problem is that the text is capturing the mouse. This can be avoided by removing the pointer events for the text in css:
// This will apply to all text elements, consider using a class
text {
pointer-events: none;
}
More information in pointer events: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Is it possible to have layered svg elements that interact with each other in d3?

I have a bar graph that is basically a navigational element, so I need easy predictable rollover behavior over the bars. Essentially I need to make sure that the small bars are as easily clicked on as the big ones, so I've made the entire column a clickable rollover.
Here is an example of the behavior I am referring to:
screenshot http://img6.imageshack.us/img6/6674/screengraph.png
I'd tried to do this with d3 and svg, but found that it was difficult to manage the z-indexes between svg elements and divs (or svg elements and other svg elements, honestly I forget the exact nature of where this was a sticking point). But I remember concluding that the only effective way to make what I was looking for happen was to have each column be 3 separate svg elements, essentially a top background, the bar, and then a bottom background, and to manually fire all 3 items to show the rollover change whenever one of them is hovered over.
I eventually just ditched svg and ended up using all divs just using d3 for the scale methods and drawing everything by hand using knockout.js templates. But now I'm looking at 200 lines of refactored javascript and I'm wondering if perhaps d3 would have given me a cleaner solution. Was I missing anything in d3 that could have accomplished what I am looking for easily?

Good on you for making the columns easily hoverable! The technique I would use for this is an invisible overlay with pointer-events: all, and optionally assigning the mouseover listener to a parent svg:g element rather than one of the rects.
The structure for each bar would look like this:
<g class="bar" transform="translate(0,…)">
<rect class="green"></rect>
<rect class="overlay"></rect>
</g>
(You probably have other things you might want to add, like the highlighted "14" in your screenshot, which you implement as another rect with rounded corners and a text element.)
The overlay rect is the full-height of the chart (70px, in your example). It has the following style:
.overlay {
fill: none;
pointer-events: all;
}
The green rect is just the height of the bar, and offset vertically so the bottom of the bar is at y=0. Same deal for the red negative rects.
In a nutshell, the invisible rect with pointer-events all receives all of the pointer-events for that bar. So you can use :hover styles on the parent g elements, say tweaking the bar color on hover:
.bar:hover .green {
fill: lightgreen;
}
Likewise, you can register "mouseover" and "mouseout" events on the parent g element, or the overlay rect.

Detecting shape coordinates in Canvas

I'm writing drag & drop functionality in my HTML5 Canvas application and am wondering how to detect if I'm clicking on a shape other than a rectangle or square, in which case I would do something like this inside of my 'mousedown' event handler:
if (evt._x > 13 && evt._x < 202 .... ) {}
I don't see how to easily do something like that with an arc like this:
ctx.arc(25, 25, 20, 0, (Math.PI/180)*360);
I hope that is clear, thank you in advance.

Just use isPointInPath, which checks if a given point is within the current drawing path. If you're drawing multiple shapes to the canvas, than a good technique is to associate each of your shapes with a "hidden" canvas, draw each path to its respective canvas, than test isPointInPath against each of these, offsetting the destination/mouse coordinates as needed. Theres no reason to resort to your own calculations for this.

First you check if the click is within a shape's bounding box (the smallest rectangle which fully encloses the shape). If it is, then you do the more complex math to determine if the click is within the shape itself. You'll have to implement this math yourself as I don't think there's anything built-in for it.

You'll get the formula you need here and also in Polygon article of Wikipedia.

This may sound stupid, but you can use <area> tags inside a <map> over an <img> to create interactive polygonal shapes. They have their own onclicks/mouseovers/etc. already implemented by all browsers.