How to resize canvas with Animated Text on it?-CodePudding

Good evening everyone I am new to this site so forgive me for any mistake I have made.

I am practice a project below and I want to add one more letter at the end like 'N' or symbol like '!'. Currrent project supported 7 letters and I want to add one more, change to 8 digits. I cannot find the way to do this. I tried a lot of things like:

I change the width from css
I change the width from javascripts
I change and test a lot of things from javascript file and I did a lot of combinations between css file and javascript

But all of this is wrong. It spoils me and confuses my text in output. When I cahnge the width from css file it makes the canvas with the text bigger but not the size to add one more letter at the end. What must i change to add one more digit at the end? Thank you!

CodePudding user response：

Each character has a width of 70, and the total width is specified in variable CANVAS_WIDTH:

const CANVAS_WIDTH = 490

Accordingly, you need to increase the value of this variable by another 70. And as a result it will be like this:

const CANVAS_WIDTH = 560

The letters in your text are passed in array FRAME_MATRIX with a matrix.

let FRAME_MATRIX = [ ... ]

Therefore, add one more element of the letter in the matrix.

This is an example of the letter N in the form of a matrix. Just play around with these values and you will get the character you want:

[
    [0, 0, 0, 0, 0, 0, 0],
    [0, 146, 0, 0, 0, 154, 0],
    [0, 145, 147, 0, 0, 153, 0],
    [0, 144, 0, 148, 0, 152, 0],
    [0, 143, 0, 0, 149, 151, 0],
    [0, 142, 0, 0, 0, 150, 0],
    [0, 0, 0, 0, 0, 0, 0],
]

CodePudding user response：

I Dont Find Any Mistakes In The Code... So If You Do The Following You Will Be Able To Add A Letter Or Any No of Letters Easily.

Change The CANVAS_WIDTH to the next multiple of 70. Like Currently you have 7 letters so it is 490 but if you want another make it 560 for 8 letters.
Also You Need To Add The Additional Matrix of the Letter You Want To Add. Like Adding The Matrix for N will give you the last letter N