KineticJsプロジェクトがあり、ループを使用して複数の長方形を作成しています。私は彼らにいかなる種類のPIIも与えていません。しかし、ドラッグコンポーネントを使用すると、それらを個別にドラッグできます。開発者ツールでは何も見えない、キャンバスの舞台裏で何が起こっているのか。x画面に表示されているすべてのものの座標や座標など、何が起こっているのかを確認できるようにしたいと思いyます。
<canvas width="1578" style="width: 1578px; height: 1200px; position: absolute;" height="1200"></canvas>
10個の長方形を持つキャンバスの開発者ツールに表示されるのはこれだけです。
A<canvas>は、それに描画された「形状」への参照を保持しません。これは実際には単なる描画面であるため、ロジックを実行し、描画された形状への参照を維持するために描画を実行するスクリプト（またはライブラリ）次第です。
そのようなネイティブ機能を備えたものが必要な場合は、<svg>要素を確認する必要があります。<rect>そこで、要素を表示（および参照）できるようになります
svgの詳細については、 https ：//developer.mozilla.org/en/docs/SVGをご覧ください。
キャンバスは単なるビットマップの描画面です。MSペイント（または実際のペイントキャンバス）のように、描画面には、描画したものの記憶がありません。できることは、現在のピクセルについて教えてくれることだけです。
KineticJSか、覚えておきたいすべての関連オブジェクトを追跡する必要があります。
KineticJSには、レイヤーを持つStageオブジェクトがあり、それらのレイヤーにはグループとシェイプがあります。
特定のレイヤーですべてのシェイプを取得することに関心があります。
KineticJSのチュートリアルとドキュメントでそれを探す必要があります。
続行する前に、これらをお読みください。