Develop Reference

Label arrows created in ArrowHelper of THREE.js

In this question (Labelling the vertices in AxisHelper of THREE.js) is explained how to label axis created with THREE.AxisHelper. I tried to follow the same procedure for THREE.ArrowHelper without sucessfull. So, I'd like to know how to label the arrows I created, just like when indicating the labels of a coordinate system (x,y,z). In this link it how I tried to reproduce the idea: http://jsfiddle.net/g7oqexr8/

What exactly does not work? It does not show up? It crashes? (if so, where???)
Tip:
Why don't you add the label object to the created arrow?
instead of:
//text.position.x = arrowHelper.geometry.vertices[1].x;
//text.position.y = arrowHelper.geometry.vertices[1].y;
//text.position.z = arrowHelper.geometry.vertices[1].z;
//text.rotation = camera.rotation;
//scene.add(text);
arrowHelper.add(text);
This adds to 'text' the position, rotation and scaling from the arrowHelper.
If you want, you can modify afterwards the 'text' rotation, position or scaling.
EDIT:
Documentation stands:
TextGeometry uses typeface.json generated fonts. Some existing fonts can be found located in /examples/fonts and must be included in the page.
That's probably why line with:
var textGeo = new THREE.TextGeometry('Y', {size: 5, height: 2, curveSegments: 6,font: "helvetiker",style: "normal"});
is crashing.

GitGraph - scaling the size of the graph

I am using the GitGraph javascript library - http://gitgraphjs.com/
I am currently using the examples file to see how things work in GitGraph. The link to the example file - https://github.com/nicoespeon/gitgraph.js/blob/develop/examples/index.js
Is there any possible way to scale the graph? I tried overriding CSS styles, the quality of graph diminished greatly.
I was expecting something like a GitGraph.scale option? Is that available?

The main project page doesn't make it easy to link, but it looks like the section titled "Define Your Own Template" is what you're looking for?
EDIT:
OK, with a better understanding of what you're looking for, I played around with it myself, and noticed that the canvas element's width and height properties are added to the DOM programmatically in GitGraph.prototype.render(), based on some moderately complicated math involving a bunch of values from the template object, plus a scalingFactor value derived using window.devicePixelRatio.
There doesn't seem to be a way to modify these values before the canvas is rendered, but using the provided graph:render event, you could do it after.
gitGraph.canvas.addEventListener("graph:render", function(event) {
console.log(event.data.id, "has been rendered with a scaling factor of", gitGraph.scalingFactor);
rescale();
}
function rescale() {
var g = document.getElementById('gitGraph');
var w = +g.style.width.slice(0,-2) * 0.5; // < just change these two
var h = +g.style.height.slice(0,-2) * 0.5; // multipliers to the same
g.style.width = w + 'px'; // value
g.style.height = h + 'px';
};
Here's that function working with the official example code (notice that it does screw up the absolutely-positioned detail div):
http://codepen.io/phoward8020/pen/ZOpERB
Does that help?
(EDIT 2: Inline Stack Overflow example code added no value to answer since it's not editable. Replaced with CodePen so readers can verify functionality by changing multiplier values.)

Apply zoom in center of the canvas

I need to apply zoom to the javascript canvas which I have badly accomplished by using the following line of code:
ctx.scale(2,2) //doubles everything's size
Instead of zooming, its obviously doubling the size of the canvas and all of its elements. I'd be okay with this if I got it working like the image below shows:
Any ideas on how I could accomplish what is depicted in the picture above? I'm not using any external libraries hence making this so difficult. Thanks.

You can translate the context by half the canvas size using ctx.translate()
EDIT :
var zoomfactor = 2; //set whatever you want as zoom factor
ctx.transform(zoomfactor,0,0,zoomfactor,-(zoomfactor-1)*canvas.width/2,-(zoomfactor-1)*canvas.height/2)

Tracking mouse position of a jqplot vertical line chart

I want to create a jqPlot line chart which has the ability to change orientation between vertical and horizontal orientation. I was able to achieve this using CSS rules, by rotating the div element containing the chart.
My work up to now: http://jsfiddle.net/GayashanNA/A4V4y/14/
But the problem is I also want to track the mouse-pointer and mouse clicks on points on chart after the orientation is flipped because i want to annotate those points. I am unable to do this when the chart is in vertical orientation. Can anyone suggest a method to do this? Or am i approaching the problem in a wrong way?
(Note: I am able to do this in horizontal orientation, you can observe it if you try to click on a point on the above chart.)
Thanks and help is much appreciated.

I've never used jqPlot, but I guess your problem is trying to use css rotate(), since the cursor plugin is using the mouse position to determine where to draw the lines, and element's size doesn't change when transformed by rotate(), it still have the same width and height values.
If you take a look at the code, you will see:
if (c.showVerticalLine) {
c.shapeRenderer.draw(ctx, [[gridpos.x, 0], [gridpos.x, ctx.canvas.height]]);
}
if (c.showHorizontalLine) {
c.shapeRenderer.draw(ctx, [[0, gridpos.y], [ctx.canvas.width, gridpos.y]]);
}
So it seems like the library is always drawing the lines based on mouse position over the original element, which of course, won't match the position after being transformed by rotate(), and XY coordinates are going to be transformed to YX after rotate().
I would try to change the size of your original element, though I don't know if the library lets you specify in which sides are the labels going to be drawn.

I finally found a solution for the problem. But i had to change jqPlot library to achieve this. To help anyone else who run in to the same problem, i'll put my solution here.
First i had to insert the following code in to the jqPlot class of the jquery.jqplot.js file, which is the core library.
function jqPlot() {
//add the following code segment
var verticallyOriented = false;
this.setVertical = function(state){
verticallyOriented = state;
}
//don't change other code that isn't mentioned here
//now you have to change the logic in the getEventPosition function
//to make sure the new orientation is detected
function getEventPosition(ev) {
//change the line starting with var gridPos = ...
//to the following code segment
//depending on the orientation the event position calculating algorithm is changed
if(verticallyOriented){
var gridPos = {x:ev.pageY - go.top , y:plot.eventCanvas._elem.height() - ev.pageX + go.left};
} else {
var gridPos = {x:ev.pageX - go.left, y:ev.pageY - go.top};
}
//no change to other code is needed
}
}
You can view a working example here: http://jsfiddle.net/GayashanNA/yZwxu/
Gist for the changed library file: https://gist.github.com/3755694
Please correct me if i have done something wrong.
Thanks.

Drawing on the canvas with a "pencil"

I made a script that draws a series of lines on a canvas that makes it look like a sketch. There are two issues with the script. One, why is the y value twice as much as it should be? And two, why is the line several pixels wide and faded out?
I've tried it in both Google Chrome and Firefox and I get the same incorrect results. I realize that I can divide the y value by two to fix the first problem but that part of my question is why do I need to do that. I shouldn't have to.

I think you have two issues:
You need to be more careful in how you calculate the offset of where to draw. I have some code below that demonstrates how to handle this properly.
You aren't setting the width and height on the <canvas> element itself, which means it will scale your lines in funny ways depending how what you've set in your css.
An Example
I built a simple collaborative drawing app using <canvas> and socket.io that lets you draw to the screen like a pencil. You can check it out here:
http://xjamundx.no.de/
The source is also on github if that might help:
https://github.com/xjamundx/CollabPaintJS/ (main repo)
https://github.com/xjamundx/CollabPaintJS/blob/master/public/collabpaint.js (canvas drawing code)
In particular I do something like this to figure out where to draw things:
x = e.clientX + window.scrollX
y = e.clientY + window.scrollY
x -= $game.offsetLeft
y -= $game.offsetTop

Give a width and a height to your canvas; always !
http://jsfiddle.net/mz6hK/7/
fixed