canvas und divs für grafiken

[kanwas]

Bastle gerade an einem Grafikeditor und stoße an ein konzeptionelles Problem. Doch erstmal etwas Markup :

<style>
  .editor {
    width:500px;
    height:500px;
  }

  .editor > * {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:scroll;
  }

 .editor .Content > * {
  position:absolute;
  display:inline-block;
  }

</style>
...

<div class="editor viewport">
  <canvas width="500px" height="500px" />
  <div class="Content">
     <div style="left:100px;top:100px">etwas text</div> 
  </div>
</div>

so hiermit ist das Zeichenfeld inter dem "Content" somit kann ich Zeichnen und Texte einfügen.

Wenn ich jetzt aber mehr Informationen-darstellen möchte muss ich meinen Editor mit Scrollingfunktionen erweitern, dazu habe ich zwei Ansätze von denen ich nicht sagen kann welcher besser ist:

1. Man vergrößere das Canvas den Content, zeigt nur einen ausschnitt und beim scrollen verschiebt man Canvas und Content entsprechend

2. Man verwaltet die Daten vom Viewport selbst, zeichnet nur das was zu sehen ist, beim scrollen verändere man die Daten und filtere das nicht Sehbare immer selbst aus.

zu 1) Zwar ist das einfach zu realisieren ist es aber auch wirklich praktikabel wenn ich ein 10000px x 10000px großes Zeichenfeld und ein ähnlich großen Content mit Unmengen von divs habe?
Wie muss ich mein css ändern damit das klappt? - durch position:absolute wird overflow:scroll ignoriert und ist über dem Viewport(content und canvas)...

zu 2) wie verwalte ich die Divs und zeichnbaren Objekte, wie finde ich am besten heraus welche ich zeichnen muss; welche nicht im zeichnbaren bereich sind?
Ist es nicht etwas unpraktisch alle Objekte zu testen ob sie im sichtbaren bereich sind(bzw teile von ihnen)?

wie würdet ihr vorgehen? habt ihr bessere Ideen?

gruß kanwas