質問：次の場合、canvasはsvgよりも適していますか？
ケース：これに似た（ただし、はるかに多くのデータを含む）グラフを（d3jsライブラリを使用して）描画しています：
http://mbostock.github.com/d3/talk/20111116/iris-parallel.html
これはsvgに基づいており、数千行（最大5000行）で正常に機能します。行を追加すると（svgパス）、パフォーマンスが大幅に低下します（ページのスクロールが遅くなります）
覚えておいてください：私はマウスイベントを追加する必要があります（これはsvgで便利です）
一般svgに、例のように、ベクター画像に適しています。ただしcanvas、ハードウェアアクセラレーションなどの最新のブラウザには多くの利点があるため、線を描く場合は、ズーム、パンなどが可能です。パフォーマンスは使用する必要はありませんcanvas。
マウスイベントはcanvas、すべてを手動で追跡する必要があるため、を使用すると面倒な場合があります。そのため、5000以上のポイントを使用canvasするのは楽しいことではありません。ただし、ポイントはすべてラスターイメージに描画され、の一部ではないため、線の数に関係なくページが正常に動作するようになったらポイントを描画すると仮定すると、トレードオフはポイントが描画された後DOMです。
正直なところ、それを見つける最良の方法は、現在キャンバスを使用しているものをテストすることです。
パフォーマンスが問題になる場合は、キャンバスへの切り替えがオプションになる場合があります。この場合、キャンバスを1回描画できます。その後、それはほとんど画像のように扱われます。描画には時間がかかる場合がありますが、その後はかなりすばやく拡大縮小できます。context.drawImageメソッド（例）を使用して、レンダリングされたSVGをキャンバスに描画できることに注意してください。したがって、SVG生成コードを保持してバックグラウンドでSVGを作成し、それをキャンバスに描画することができます。
ただし、キャンバス上に配置されるとすぐにSVGほど美しくは拡大縮小されないことに注意してください。ユーザーがズームインすると、ブラウザがグラフィックを拡大縮小する方法に応じて、ぼやけたりピクセル化したりします。
キャンバス上のクリックイベントは、2つの方法で処理できます。クリックターゲットの配列を保持し、onclickイベントハンドラーをキャンバスに追加します。クリックが発生したら、配列を繰り返し、クリック座標に最も近い配列を確認します。
もう1つのオプションは、ヒット領域を使用することです。これらはポリゴンパスとして定義する必要があります。
上記のすべてに+1。SVG上でcanvasを使用したり、DOMを使用して画像を合成したりすると、パフォーマンスが驚くほど向上するのを見てきました。
マウスイベントを使用してキャンバス画像を操作することについて、あなたが説明しているような画像の最良のアプローチは、次のようなライブラリを使用して画像を抽象化することだと思います。
コードをキャンバス自体から遠ざけて、ライブラリに考えさせてください。