Three.js - Why is my sprite drawing somewhere other than its position? - three.js

Question

I'm using Three.js r69.
I'm drawing several sprites, each with a canvas texture so that I can draw text onto it. I'm following the suggestions found in this question, with a few simple modifications to make it work in r69. When I set the position of the sprite, it doesn't draw it at its position. Here's a screenshot of what's happening:
I'll also include the code I'm using to generate the sprite:
this.text = _text;
this.textColor = new THREE.Color();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
//...set the font
//...measure the text width
//...get the aspect ratio of width to height of the text
//...set the background color
//...set the border color
var borderThickness = 2;
ctx.lineWidth = borderThickness;
roundRect(ctx,
borderThickness * 0.5, // x
borderThickness * 0.5, // y
this.textWidth + borderThickness, // width
fontsize * 1.4 + borderThickness, // height
6 // corner radius
);
//...set font color
ctx.fillText(this.text, borderThickness, fontsize + borderThickness);
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
var spriteMaterial = new THREE.SpriteMaterial(
{map: texture}
);
this.object = new THREE.Sprite(spriteMaterial);
this.object.scale.set(2, 2/this.aspect, 1.0);
Am I doing something wrong when I'm generating the canvas and SpriteMaterial? Or is it something else? I'd like the sprite to pivot around its center, not some point that's completely outside the canvas.

Answer 1

Looks like I wasn't explicitly setting the size of the canvas, so it was defaulting to 300 x 150.
I set the canvas size to that of just the text label, and it positions it correctly.