Obnize canvas ctx を for in してみる

Obnizでcanvasを使うときに下記のような書き方で最後に obniz.display.draw(ctx); というコードが入るのだけれど、もしかして、Obnizのcanvasが特殊なのか、あるいは canvas 自体は普通で、display.draw は Obnizへ投げるためだけのメソッドなのかとか少し気になって canvas を forin してみた。

```html
<canvas id=canvas></canvas>

<script>

const ctx = $("#canvas")[0].getContext('2d');  
let obniz = new Obniz("OBNIZ_ID_HERE");

obniz.onconnect = async function () {
  obniz.display.clear();
  ctx.fillStyle = "white";
  ctx.font = "30px sans-serif";
  ctx.fillText('漢字', 0, 40);

  obniz.display.draw(ctx);
}

</script>
```

###下記のコードでfor in します。

```html
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/obniz@1.4.3/obniz.js" crossorigin="anonymous"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>obniz canvas ctx for in</h1>

<canvas id=hoge></canvas>

<script>

const canvas = document.getElementById("hoge")
const ctx = canvas.getContext('2d');  
let obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {

  let list=''
  for(let i in ctx){
    list+='<br><strong>'+i+':</strong> '+ctx[i]
  }
  console.log(list) 
}

</script>
</body>
</html>
```

###結果

これは、実行したブラウザChrome バージョン: 66.0.3359.181（Official Build） （64 ビット） のforin結果と同じでした。ちゃんちゃん。

<strong>canvas:</strong> [object HTMLCanvasElement]<br><strong>globalAlpha:</strong> 1<br><strong>globalCompositeOperation:</strong> source-over<br><strong>filter:</strong> none<br><strong>imageSmoothingEnabled:</strong> true<br><strong>imageSmoothingQuality:</strong> low<br><strong>strokeStyle:</strong> #000000<br><strong>fillStyle:</strong> #000000<br><strong>shadowOffsetX:</strong> 0<br><strong>shadowOffsetY:</strong> 0<br><strong>shadowBlur:</strong> 0<br><strong>shadowColor:</strong> rgba(0, 0, 0, 0)<br><strong>lineWidth:</strong> 1<br><strong>lineCap:</strong> butt<br><strong>lineJoin:</strong> miter<br><strong>miterLimit:</strong> 10<br><strong>lineDashOffset:</strong> 0<br><strong>font:</strong> 10px sans-serif<br><strong>textAlign:</strong> start<br><strong>textBaseline:</strong> alphabetic<br><strong>save:</strong> function save() { [native code] }<br><strong>restore:</strong> function restore() { [native code] }<br><strong>scale:</strong> function scale() { [native code] }<br><strong>rotate:</strong> function rotate() { [native code] }<br><strong>translate:</strong> function translate() { [native code] }<br><strong>transform:</strong> function transform() { [native code] }<br><strong>setTransform:</strong> function setTransform() { [native code] }<br><strong>resetTransform:</strong> function resetTransform() { [native code] }<br><strong>createLinearGradient:</strong> function createLinearGradient() { [native code] }<br><strong>createRadialGradient:</strong> function createRadialGradient() { [native code] }<br><strong>createPattern:</strong> function createPattern() { [native code] }<br><strong>clearRect:</strong> function clearRect() { [native code] }<br><strong>fillRect:</strong> function fillRect() { [native code] }<br><strong>strokeRect:</strong> function strokeRect() { [native code] }<br><strong>beginPath:</strong> function beginPath() { [native code] }<br><strong>fill:</strong> function fill() { [native code] }<br><strong>stroke:</strong> function stroke() { [native code] }<br><strong>drawFocusIfNeeded:</strong> function drawFocusIfNeeded() { [native code] }<br><strong>clip:</strong> function clip() { [native code] }<br><strong>isPointInPath:</strong> function isPointInPath() { [native code] }<br><strong>isPointInStroke:</strong> function isPointInStroke() { [native code] }<br><strong>fillText:</strong> function fillText() { [native code] }<br><strong>strokeText:</strong> function strokeText() { [native code] }<br><strong>measureText:</strong> function measureText() { [native code] }<br><strong>drawImage:</strong> function drawImage() { [native code] }<br><strong>getImageData:</strong> function getImageData() { [native code] }<br><strong>putImageData:</strong> function putImageData() { [native code] }<br><strong>createImageData:</strong> function createImageData() { [native code] }<br><strong>setLineDash:</strong> function setLineDash() { [native code] }<br><strong>getLineDash:</strong> function getLineDash() { [native code] }<br><strong>closePath:</strong> function closePath() { [native code] }<br><strong>moveTo:</strong> function moveTo() { [native code] }<br><strong>lineTo:</strong> function lineTo() { [native code] }<br><strong>quadraticCurveTo:</strong> function quadraticCurveTo() { [native code] }<br><strong>bezierCurveTo:</strong> function bezierCurveTo() { [native code] }<br><strong>arcTo:</strong> function arcTo() { [native code] }<br><strong>rect:</strong> function rect() { [native code] }<br><strong>arc:</strong> function arc() { [native code] }<br><strong>ellipse:</strong> function ellipse() { [native code] }

では、次に通常の canvas 処理のテストに入ります。
https://qiita.com/toshirot/items/fe596aeb12e9a78ba408