Wie man HTML5 Canvas im funktionalen Stil verwendet

Question

Ich arbeite mit dem Canvas-Element von HTML5 und frage mich, wie ich meine eigenen benutzerdefinierten Zeichenfunktionen auf funktionale Weise am besten implementieren kann. Jede dieser Funktionen benötigt den Kontext, aber mir fallen mehrere Möglichkeiten ein, um ihn ihnen zu geben:

1. Fügen Sie ihn als Parameter zu jedem Funktionsaufruf hinzu
2. Fügen Sie ihn als globale Variable hinzu
3. Rufen Sie "getContext" in jeder Zeichenmethode auf.
4. Erweitern Sie das Prototyp von 'CanvasRenderingContext2D'.

Ich verwende ungern globale Variablen, wenn es vermeidbar ist, daher lasse ich Option 2 weg. Option 3 erfordert viel zu viel Code-Duplizierung, daher ignoriere ich auch das.

Dies lässt mich mit Wahl 1 zurück, so würde ich es in einer nicht funktionalen Sprache machen, und 4, was meiner Meinung nach der sauberste Ansatz ist, aber ich bin mir nicht ganz sicher, ob es nicht zu Problemen führen wird. Wie machen Sie das? Gibt es einen Grund, warum ich nicht mit Option 4 gehen sollte?

Um dies zu veranschaulichen, werde ich für jede der verbleibenden Optionen ein Codebeispiel hinzufügen. Hier ist Option 1:

function drawPerson(context, ...) {
    context.fillRect(...);
    ...
}

$(function() {
    var context = $("#canvas")[0].getContext("2d");
    drawPerson(context, ...);
});

Und hier Option 4:

CanvasRenderingContext2D.prototype.drawPerson = function(...) {
    this.fillRect(...);
    ...
}

$(function() {
    var context = $("#canvas")[0].getContext("2d");
    context.drawPerson(...);
});

Answer 1

Ein weiterer Möglichkeit ist die Verwendung eines Moduls, das alle Zeichenfunktionen enthält und initialize() aufruft:

var Painter = (function(){

  var context = null;

  return {
    init : function(ctx){
      context = ctx;
    },
    drawPerson : function(){
      /* mache etwas mit dem Kontext*/
    }
  }

})(); 

Painter.init($("canvas").getContext("2d"));
Painter.drawPerson();

Auf diese Weise gibt es nur eine globale Variable, der Kontext wird nur einmal gesetzt und Sie verändern keine anderen Objekte.