付箋の自動フォントサイズ調整

https://gyazo.com/04429673a388276b95d828e95b60ec78

canvasの文字列のメトリクス

code::

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

var txt = "Hello World"

ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50)

ctx.fillText(txt, 10, 100);

幅しか取れない

SVGの時は<br/>を挿入できたがcanvasではできなさそう

英文複数行表示

単語で刻んでメトリクスを測っている

文字の間にbreakable:0/1の属性があると考えられる

とりあえず日本語をターゲットにして全部1にしておく

lineheight

point 0,0 でsize:100で333と書いてgetBoundsすると

ctx.measureText("333")

TextMetrics {width: 166.845703125}

window.x.textItem.getBounds()

Rectangle {_x: -98.54999542236328, _y: -50, _width: 197.09999084472656, _height: 120, _owner: PointText, …}

"33"だと

textItem.getBounds()

Rectangle {_x: -98.54999542236328, _y: -50, _width: 131.39999389648438, _height: 120, _owner: PointText, …}

ctx.measureText("33")

TextMetrics {width: 111.23046875}

paper.getBounds.heightは単純にfontsize * 1.2