Rotate text
-
Hi, New here. Anyway I'm working on a project and I'm placing some text over some images. All is good with that. However I only want to rotate the text 35 degrees but I can't figure how to do that in Javascript. Here is how I'm displaying the text -
const ctxt = canvas.getContext('2d');
ctxt.fillStyle = 'red';
ctxt.font = '40px Brush Script MT';
ctxt.fillText('TEST',200,178);Thanks.
-
Hi, New here. Anyway I'm working on a project and I'm placing some text over some images. All is good with that. However I only want to rotate the text 35 degrees but I can't figure how to do that in Javascript. Here is how I'm displaying the text -
const ctxt = canvas.getContext('2d');
ctxt.fillStyle = 'red';
ctxt.font = '40px Brush Script MT';
ctxt.fillText('TEST',200,178);Thanks.
The canvas uses a transformation matrix and it has a few functions for manipulating it. Here is a 35-degree rotation:
const ctxt = canvas.getContext('2d');
ctxt.fillStyle = 'red';
ctxt.font = '40px Brush Script MT';
const tm = ctxt.measureText('TEST');
ctxt.translate(200 + tm.width / 2, 178);
ctxt.rotate(35 * 3.14159 / 180);
ctxt.translate(-(200 + tm.width / 2), -178);
ctxt.fillText('TEST',200,178);
ctxt.resetTransform(); -
The canvas uses a transformation matrix and it has a few functions for manipulating it. Here is a 35-degree rotation:
const ctxt = canvas.getContext('2d');
ctxt.fillStyle = 'red';
ctxt.font = '40px Brush Script MT';
const tm = ctxt.measureText('TEST');
ctxt.translate(200 + tm.width / 2, 178);
ctxt.rotate(35 * 3.14159 / 180);
ctxt.translate(-(200 + tm.width / 2), -178);
ctxt.fillText('TEST',200,178);
ctxt.resetTransform();Awesome! Just what I needed. Thanks!