【JavaScript】半角全角を考慮してテキストを改行させる方法

Canvasで意外と手こずった部分なので復習も兼ねて、似たようなものを作る人に少しでも参考になればと。Canvasに限らず使えると思う。

//改行して分割された文字列を入れるための配列
var textArray = [];
var text = '';
//改行させたい半角での長さ
const kaigyou = 8;

//文字列のバイト数を取得
const ByteCount = (string) =>{
    var byte = 0;
    for (i = 0; i < string.length; i++){
        if(string[i].match(/[ -~]/)){
            byte += 1; //半角の場合
        }else{
            byte += 2; //全角の場合
        }
    }
    return byte ;
}

//何文字目で改行するかを取得
const SliceCount = (string) =>{
    var count = 0;
    var byte = kaigyou;　
    for (i = 0; byte > 0; i++){
        if(string[i].match(/[ -~]/)){
            byte -= 1; //半角の場合
        }else{
            byte -= 2; //全角の場合
        }
        count++;
    }
    //byteが０になった時点で何文字カウントされたかを戻り値として返す
    return count;
}

const InputTextA = () =>{
  var byteRest = byte //残りのバイト数という変数
  var row = 0; 
  //HTMLでidをTextに設定してある項目の文字列を代入
  text = document.getElementById("Text").value;
  byte = ByteCount(text);

  textArray[0] = text; 
    //残りのバイト数が一行分より長い間はぐるぐる回す
    while(byteRest > kaigyou){
        var sliceNum = SliceCount(text);
        textArray[row] = text.slice(0,sliceNum);
        textArray[row + 1] = text.slice(sliceNum);

        text = textArray[row + 1];
        byteRest -= kaigyou; //１行分のバイト数を引く
        row ++;
    }
    DisplayText();

}

//テキストを描画
const DisplayText = () =>{
    if(text != ""){
        ctx.font = "23px 'ＭＳ ゴシック'";
        var row = 0;
        var byteRest = byte
        while(byteRest > 0){

            ctx.fillStyle = 'black';
            ctx.textBaseline = 'top';
            //30pxずつずらすことで改行している
            ctx.fillText(textArray[row],0, row * 30);

            row++;
            byteRest -= kaigyou;
        }
    }
}

下の画像で８バイトで改行できることが確認できます。