🖼
Fabric.js の使い方メモ

2022/07/06 に公開
Canvas 内に画像やテキストを配置したりするのに便利な Fabric.js の自分用メモです。
yarn add fabric
 いちばん簡単な表示の例
<template lang="pug">
  canvas(ref="canvas_el" width="200" height="200")
</template>
<script>
import { fabric } from "fabric"
export default {
  mounted() {
    const canvas = new fabric.Canvas(this.$refs.canvas_el)
    const rect = new fabric.




    
Rect({width: 50, height: 50, fill: "blue"})
    canvas.add(rect)
    rect.center()
</script>
<style lang="sass">
canvas
  border: 1px dashed blue
</style>
Vue.js のオールドスタイルで書いてる
最初に fabric.Canvas のインスタンスを生成する
それに対して他の要素を add していく
center() は add してからでないと効かなかった (それはそう)
 ライブラリのお約束的なこと
インタンスには生成時のオプションと同じアクセサがあるっぽい。なので次の2つは同じこと(だと勝手に思っている)。
const canvas = new fabric.Canvas(html_element, {selection: false})
const canvas = new fabric.Canvas(html_element)
canvas.selection = false
 背景画像の読み込み
 方法1. とにかく読み込む
const url = "https://dummyimage.com/600x400/008/FFF.png"
canvas.setBackgroundImage(url, () => canvas.renderAll())
fabric.Image.fromURL で読み込んだものを canvas.setBackgroundImage に渡してもよい
第二引数の謎
マニュアルには canvas.renderAll.bind(canvas) と書いてある
ググってもそればかりでてくる
意味がわからないので () => canvas.renderAll() に変えたら動いたのでよしとする
renderAll() を呼ばないと表示されない
toDataURL できない罠あり (後述)
 方法2. 背景画像にキャンバスを合わせる
const url = "https://dummyimage.com/600x400/008/FFF.png"
canvas.setBackgroundImage(url, e => {
  canvas.setDimensions({width: e.width, height: e.height})
  canvas.renderAll()
キャンバスのサイズは変わるけど隙間はできない
キャンバスが巨大化する恐れあり
キャンバスのサイズはあとから変更できないと思ってたけど勘違いだったようだ
 方法3. キャンバスに背景画像を合わせる
const url = "https://dummyimage.com/600x400/008/FFF.png"
fabric.Image.fromURL(url, e => {
  e.scaleToWidth(canvas.width)
  canvas.setBackgroundImage(e, () => canvas.renderAll())
上は横幅をキャンバスに収める場合の例
縦幅をキャンバスに収める場合は e.scaleToHeight(canvas.height) とする
 toDataURL が失敗する問題
const url = "https://dummyimage.com/600x400/008/FFF.png"
canvas.setBackgroundImage(url, e => {
  canvas.renderAll()
const data_url = canvas.toDataURL()
上のように外部の画像を読み込むと toDataURL が失敗する
「キャンバスが汚染されている」というだけの不親切なエラーメッセージが出る
対策1. 要素に crossOrigin 指定
const url = "https://dummyimage.com/600x400/008/FFF.png"
canvas.setBackgroundImage(url, e => {
  e.crossOrigin = "anonymous"
  canvas.renderAll()
対策2. setBackgroundImage のオプションに crossOrigin 指定
const url = "https://dummyimage.com/600x400/008/FFF.png"
canvas.setBackgroundImage(url, e => {
  canvas.renderAll()
}, {
  crossOrigin: "anonymous",
上のどちらもでも回避できた。が、似た対処方が複数あってなんともすっきりしない。
参考 🙏
&lt;/span&gt;&lt;a href="https://blog.np-sys.com/tainted-canvases-may-not-be-exported/" style="" target="_blank" rel="nofollow noopener noreferrer"&gt;https://blog.np-sys.com/tainted-canvases-may-not-be-exported/&lt;/a&gt;&lt;/p&gt;
&lt;a class="header-anchor-link" href="#originx-originy-%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%AA%E3%81%AE%E3%81%8B%EF%BC%9F" aria-hidden="true"/&gt; originX originY とは何なのか？&lt;/h1&gt;
&lt;li&gt;公式サイトの&lt;a href="http://fabricjs.com/test/misc/origin.html" target="_blank" rel="nofollow noopener noreferrer"&gt;サンプル&lt;/a&gt;がわかりやすかった&lt;/li&gt;
&lt;li&gt;要素の座標は要素のどこを基点としているかを表わす&lt;/li&gt;
&lt;li&gt;組み合わせ的には多いが考慮するのは&lt;strong&gt;左上&lt;/strong&gt;と&lt;strong&gt;中央&lt;/strong&gt;の二つしかない&lt;/li&gt;
&lt;a class="header-anchor-link" href="#%E8%A6%81%E7%B4%A0%E3%81%AE%E4%B8%AD%E5%A4%AE%E3%81%AE%E5%BA%A7%E6%A8%99%E3%82%92%E6%B1%82%E3%82%81%E3%82%8B%E3%81%AE%E3%81%AB%E7%84%A1%E9%A7%84%E3%81%AB%E3%81%8C%E3%82%93%E3%81%B0%E3%81%A3%E3%81%A6%E3%81%AF%E3%81%84%E3%81%91%E3%81%AA%E3%81%84" aria-hidden="true"/&gt; 要素の中央の座標を求めるのに無駄にがんばってはいけない&lt;/h2&gt;
&lt;p&gt;仮に 100x100 のキャンバスの中央付近に 50x50 の要素が配置されているときの要素の &lt;code&gt;aCoords&lt;/code&gt; はこんな感じになっている。&lt;/p&gt;
  &lt;span class="token literal-property property"&gt;tl&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt; &lt;span class="token literal-property property"&gt;x&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token number"&gt;24.5&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token literal-property property"&gt;y&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token number"&gt;24.5&lt;/span&gt; &lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;tr&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt; &lt;span class="token literal-property property"&gt;x&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token number"&gt;75.5&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token literal-property property"&gt;y&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token number"&gt;24.5&lt;/span&gt; &lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;br&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt; &lt;span class="token literal-property property"&gt;x&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token number"&gt;75.5&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token literal-property property"&gt;y&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token number"&gt;75.5&lt;/span&gt; &lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;bl&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt; &lt;span class="token literal-property property"&gt;x&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token number"&gt;24.5&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token literal-property property"&gt;y&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token number"&gt;75.5&lt;/span&gt; &lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;&lt;code&gt;tl&lt;/code&gt; は左上で &lt;code&gt;br&lt;/code&gt; は右下なので X 座標の中心を求めるなら、&lt;/p&gt;
&lt;li&gt;&lt;code&gt;tl.x + (br.x - tl.x) / 2&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;24.5 + (75.5 - 24.5) / 2&lt;/code&gt;&lt;/li&gt;
&lt;p&gt;として 50 になる。同様に Y 座標も計算すると 50 になる。&lt;/p&gt;
&lt;p&gt;と、こんな感じでいかにも間違えそうな計算をしないでいいように originX と originY には center を指定しておく。&lt;/p&gt;
&lt;div class="code-block-container"&gt;&lt;pre class="language-javascript"&gt;&lt;code class="language-javascript"&gt;&lt;span class="token keyword"&gt;new&lt;/span&gt; &lt;span class="token class-name"&gt;fabric&lt;span class="token punctuation"&gt;.&lt;/span&gt;Rect&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;originX&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token string"&gt;"center"&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;originY&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token string"&gt;"center"&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;すると &lt;code&gt;(left, top)&lt;/code&gt; は最初から &lt;code&gt;(50, 50)&lt;/code&gt; になっている。&lt;/p&gt;
&lt;a class="header-anchor-link" href="#%E8%A6%8B%E3%81%88%E3%82%8B%E5%8C%96%E3%81%99%E3%82%8B" aria-hidden="true"/&gt; 見える化する&lt;/h1&gt;
&lt;div class="code-block-container"&gt;&lt;pre class="language-javascript"&gt;&lt;code class="language-javascript"&gt;&lt;span class="token function"&gt;template&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;v&lt;span class="token operator"&gt;-&lt;/span&gt;&lt;span class="token keyword control-flow"&gt;if&lt;/span&gt;&lt;span class="token operator"&gt;=&lt;/span&gt;&lt;span class="token string"&gt;"canvas"&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;
  p &lt;span class="token punctuation"&gt;{&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;canvas&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token method function property-access"&gt;getActiveObject&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;
  b&lt;span class="token operator"&gt;-&lt;/span&gt;&lt;span class="token function"&gt;table&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt;data&lt;span class="token operator"&gt;=&lt;/span&gt;&lt;span class="token string"&gt;"canvas.getObjects()"&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;
    &lt;span class="token function"&gt;template&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;slot&lt;span class="token operator"&gt;-&lt;/span&gt;scope&lt;span class="token operator"&gt;=&lt;/span&gt;&lt;span class="token string"&gt;"{row}"&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;
      b&lt;span class="token operator"&gt;-&lt;/span&gt;table&lt;span class="token operator"&gt;-&lt;/span&gt;&lt;span class="token function"&gt;column&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;label&lt;span class="token operator"&gt;=&lt;/span&gt;&lt;span class="token string"&gt;"type"&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;row&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token property-access"&gt;type&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;
      b&lt;span class="token operator"&gt;-&lt;/span&gt;table&lt;span class="token operator"&gt;-&lt;/span&gt;&lt;span class="token function"&gt;column&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;label&lt;span class="token operator"&gt;=&lt;/span&gt;&lt;span class="token string"&gt;"x"&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;row&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token property-access"&gt;top&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;
      b&lt;span class="token operator"&gt;-&lt;/span&gt;table&lt;span class="token operator"&gt;-&lt;/span&gt;&lt;span class="token function"&gt;column&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;label&lt;span class="token operator"&gt;=&lt;/span&gt;&lt;span class="token string"&gt;"y"&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;row&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token property-access"&gt;left&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;
      b&lt;span class="token operator"&gt;-&lt;/span&gt;table&lt;span class="token operator"&gt;-&lt;/span&gt;&lt;span class="token function"&gt;column&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;label&lt;span class="token operator"&gt;=&lt;/span&gt;&lt;span class="token string"&gt;"w"&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;row&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token property-access"&gt;width&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;
      b&lt;span class="token operator"&gt;-&lt;/span&gt;table&lt;span class="token operator"&gt;-&lt;/span&gt;&lt;span class="token function"&gt;column&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;label&lt;span class="token operator"&gt;=&lt;/span&gt;&lt;span class="token string"&gt;"h"&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;row&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token property-access"&gt;height&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;
      b&lt;span class="token operator"&gt;-&lt;/span&gt;table&lt;span class="token operator"&gt;-&lt;/span&gt;&lt;span class="token function"&gt;column&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;label&lt;span class="token operator"&gt;=&lt;/span&gt;&lt;span class="token string"&gt;"raw"&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;row&lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;
      b&lt;span class="token operator"&gt;-&lt;/span&gt;table&lt;span class="token operator"&gt;-&lt;/span&gt;column
        button&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token method function property-access"&gt;button&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;@click&lt;span class="token operator"&gt;=&lt;/span&gt;&lt;span class="token string"&gt;"canvas.remove(row)"&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt; remove
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;動作検証している環境が大昔の Vue.js + Buefy で何かをアップデートすると何かが壊れるという悲しい状況なので、かなり古めかしい書き方になってしまった。とりあえず、いろいろ表示しとかないと何がどうなっているのかさっぱりわからない。&lt;code&gt;getObjects()&lt;/code&gt; で保持している要素の配列が返る。&lt;/p&gt;
&lt;p&gt;ただ、このままだと再描画されないのでマウス操作を変更のトリガーとして再描画する。&lt;/p&gt;
&lt;div class="code-block-container"&gt;&lt;pre class="language-javascript"&gt;&lt;code class="language-javascript"&gt;&lt;span class="token keyword"&gt;this&lt;/span&gt;&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token property-access"&gt;canvas&lt;/span&gt;&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token method function property-access"&gt;on&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token string"&gt;"mouse:move"&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt; &lt;span class="token arrow operator"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="token keyword"&gt;this&lt;/span&gt;&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token method function property-access"&gt;$forceUpdate&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;もしくは &lt;code&gt;deep: true&lt;/code&gt; で変更を監視して再描画する。&lt;/p&gt;
&lt;div class="code-block-container"&gt;&lt;pre class="language-javascript"&gt;&lt;code class="language-javascript"&gt;&lt;span class="token literal-property property"&gt;watch&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;canvas&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
    &lt;span class="token function"&gt;handler&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt; &lt;span class="token keyword"&gt;this&lt;/span&gt;&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token method function property-access"&gt;$forceUpdate&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt; &lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
    &lt;span class="token literal-property property"&gt;deep&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token boolean"&gt;true&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
&lt;a class="header-anchor-link" href="#%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E9%85%8D%E7%BD%AE%E3%81%99%E3%82%8B" aria-hidden="true"/&gt; テキストを配置する&lt;/h1&gt;
&lt;div class="code-block-container"&gt;&lt;pre class="language-javascript"&gt;&lt;code class="language-javascript"&gt;&lt;span class="token keyword"&gt;const&lt;/span&gt; element &lt;span class="token operator"&gt;=&lt;/span&gt; &lt;span class="token keyword"&gt;new&lt;/span&gt; &lt;span class="token class-name"&gt;fabric&lt;span class="token punctuation"&gt;.&lt;/span&gt;Text&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token string"&gt;"こんにちは"&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;originX&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token string"&gt;"center"&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;originY&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token string"&gt;"center"&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;fill&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token string"&gt;"black"&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;fontSize&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token number"&gt;64&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;fontFamily&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token string"&gt;"Ariel"&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
canvas&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token method function property-access"&gt;add&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;element&lt;span class="token punctuation"&gt;)&lt;/span&gt;
element&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token method function property-access"&gt;center&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;
&lt;code&gt;origin(X|Y)&lt;/code&gt; で「こんにちは」の「に」の中心を座標の基点とする(重要)&lt;/li&gt;
&lt;li&gt;背景画像の上に配置する場合は読みやすいようにこれを追加して縁取る&lt;/li&gt;
&lt;div class="code-block-container"&gt;&lt;pre class="language-javascript"&gt;&lt;code class="language-javascript"&gt;&lt;span class="token literal-property property"&gt;stroke&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token string"&gt;"white"&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;   &lt;span class="token comment"&gt;// 縁取り色&lt;/span&gt;
&lt;span class="token literal-property property"&gt;strokeWidth&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token number"&gt;1.0&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;  &lt;span class="token comment"&gt;// 縁取り幅&lt;/span&gt;
&lt;a class="header-anchor-link" href="#%E3%82%88%E3%81%8F%E4%BD%BF%E3%81%86%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89" aria-hidden="true"/&gt; よく使うメソッド&lt;/h1&gt;
&lt;p&gt;Canvas&lt;/p&gt;