JSFiddle - React, Tailwind, and code Playground

by icodeforlove

JavaScript

// ใช่
var canvas = document.createElement('canvas'),
    context = canvas.getContext('2d'),
    font = '200px Verdana';

canvas.width = canvas.height = 500;
canvas.style.cssText = 'border: 1px solid black; display: block; -webkit-transform-origin: 0 0; -webkit-transform: scale(.5); position: absolute;';
context.font = font;
context.textAlign = 'left';
context.textBaseline = 'top';

document.body.appendChild(canvas);

context.fillText('ภีภี่', 0, 0);
/*
var rects = getBoundsForCharacter('ภ', 'ี', font);

context.strokeStyle = 'red';

rects.forEach(function (bounds) {
    context.strokeRect(bounds.x, bounds.y, bounds.w, bounds.h);
});
*/
var rects = getBoundsForCharacter('ภี', '่', font);

context.strokeStyle = 'blue';

rects.forEach(function (bounds) {
    context.strokeRect(bounds.x, bounds.y, bounds.w, bounds.h);
});
/*
var rects = getBoundsForCharacter('ภ', null, font);

context.strokeStyle = 'green';
//context.fillText('ภี่', 0, 0);

rects.forEach(function (bounds) {
    context.strokeRect(bounds.x, bounds.y, bounds.w, bounds.h);
});
*/
var tones = ['่'];

var word = 'ช่ช่';
var charactersGrouped = [];


word.split('').forEach(function  (character, index, array) {
    if (tones.indexOf(character) !== -1) return;
    
    var group = character;
    if (tones.indexOf(array[index+1]) !== -1) {
        group += array[index+1];
    }
    charactersGrouped.push(group);
});
                       console.log(charactersGrouped);
//console.log(context.measureText('ช').width);
//context.fillText(word, 0, 0);
//context.fillText(word, context.measureText('ช').width, 0);


//var characters 
/*
var bounds = 'ช่'.split('').map(function (character, index, array) {
    if (tones.indexOf(character) !== -1) {
        return getBoundsForCharacter(array[index-1], character, font)
    } else {
        return getBoundsForCharacter(character, null, font)
    }
});

bounds.forEach(function (bounds) {
    context.strokeRect(bounds.x, bounds.y, bounds.w, bounds.h);
});
*/
function...