Change text canvas position

Questions
,
1

hi, im rendering 3d model with 2d canvas using TDSLoader with below code

const canvas = document.createElement("canvas")
canvas.height = 256
canvas.width = 256

const ctx = canvas.getContext("2d")
ctx.fillStyle = '#2e3b51'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.font = `bold 80px Montserrat`
ctx.textAlign = "center"
ctx.textBaseline = "middle"
ctx.fillStyle = '#22aabc'
ctx.fillText(legend.toUpperCase(), canvas.width / 2, canvas.height / 2)

const texture = new THREE.Texture(canvas)
texture.needsUpdate = true

const kc = geometry.clone()

// apply texture on keycap
const material = new THREE.MeshStandardMaterial({
  map: texture,
  metalness: 0.5,
  roughness: 0.6,
})
kc.traverse(function(child) {
  if (child instanceof Mesh) {
    child.material = material
  }
})

scene.add(kc)

the result like below image (black text). but i want the text display at the position like red P. i tried to test with some options for Texture but unable to re-position to the expected one. pls help me

Screen Shot 2020-08-07 at 4.41.07 PM

2

It’s a bit hard to debug this issue without a live example.

I suggest you just create a red canvas so you know what area is actually covered by the texture. In the next step, you should modify the x and y parameters of the fillText() call so the text appears at the right position.

3

what’s “red canvas” you mentioned here? is it an AxesHelper?

4

With “red canvas” I just mean that you apply a color to the entire canvas. In this way, you actually see the full extent of the texture.

5

ah, understood that. when i tried with strokeFill, a red box displayed. i think it’s why the text displayed there.

i’m having another issue here, not sure if it’s same issue. could you have a look?