Rotate Text Alignment

[arshmalikrs]

When text is rotated the then the alignment is automatically set to center again even if it was set to left or right. Drawing the same text multiple times with different align still puts the text on the same spot regardless of the align.

[caleb531]

@arshmalikrs I am unable to reproduce this behavior, per my attempt below in the jCanvas Sandbox. Can you please provide a code example that I can test in the Sandbox?

$('canvas').drawText({
  fillStyle: '#36c',
  fontStyle: 'bold',
  fontSize: '20pt',
  fontFamily: 'Trebuchet MS, sans-serif',
  text: 'The quick brown fox jumps over the lazy dog.',
  x: 180, y: 150,
  align: 'left',
  maxWidth: 300,
  lineHeight: 1.3,
  rotate: 30
});

[arshmalikrs]

The canvas on top is what happens when I align text with jcanvas the point which the coordinates specify stay the same whereas with regular JS when the text is aligned it changes the point on the text which the coordinate specify.

[arshmalikrs]

This is the code: JCanvas: $("canvas").drawText({ x: 100, y: 100, align: 'right', layer: true, name: 'rightText', text: 'Test Text', fontSize: 30, fillStyle: '#000000', rotate: 90 }); $("canvas").drawText({ x: 130, y: 100, align: 'left', layer: true, name: 'leftText', text: 'Test Text', fontSize: 30, fillStyle: '#000000', rotate: 90 }); $("canvas").drawText({ x: 160, y: 100, align: 'center', layer: true, name: 'centerText', text: 'Test Text', fontSize: 30, fillStyle: '#000000', rotate: 90 });

Regular JS: var canvas = temp1; var ctx = canvas.getContext('2d'); ctx.rotate(0.5*Math.PI); ctx.textAlign = 'right'; ctx.fillText("Test Text", 100, -100); ctx.textAlign = 'left'; ctx.fillText("Test Text", 100, -130); ctx.textAlign = 'center'; ctx.fillText("Test Text", 100, -160);

[mikedatsko]

@arshmalikrs could you provide an example with https://stackblitz.com (or https://jsfiddle.net or http://jsbin.com or https://codepen.io or what is your preferred online editor)?

[arshmalikrs]

https://codepen.io/arshmalikrs/pen/eYmJewY here is the example. left canvas is what should happen and right canvas is what happens

[mikedatsko]

@arshmalikrs I added respectAlign: true to the text properties and it looks as expected now. Can you check it, please? https://projects.calebevans.me/jcanvas/docs/text/#aligning-text-to-a-margin