[FRAGE] Canvas wird nicht auf canvas gerendert via drawImage

[xorg1990]

Hi, ich beschäftige mich seit 4h mit ein Problem wo ich mich Frage warum?

Es ist so ich habe ein main Canvas 1024*768. Auf diese canvas rendere ich 3 andere canvases.
Das WasserfallCanvas, das FrequenzskalaCanvas und das DecibelCanvas (Ich nenne die jetzt mal so).

den main canvasContext habe ich über this global verfügbar gemacht.
this.canvas_ctx ist der globale Context vom haupt canvas.

Das kuriose ist das DecibelCanvas nicht zu sehen ist, die andren 2 gehen.

//Renders the db gird on the canvas
 	Window.prototype.renderdBGrid = function(From, To){
 		var c = document.createElement("canvas");
 		var ctx = c.getContext('2d');
 		ctx.clearRect(beginGrid,0,gridWidth,this.canvas_height); 
 		var beginGrid = this.canvas_width-this.beginScale+this.F_ScaleWidth;
 		var gridWidth = this.canvas_width-beginGrid;
 		c.width=gridWidth ;
 		c.height = this.canvas_height;
 		var dBs = From - To;
 		var lines = 0;
 		if  (dBs<=5) lines = 10;
 	    else if (dBs<=11) lines = 6;
 	    else if (dBs>=11) lines = 10;
 	    var xSpan = gridWidth/lines;
 	    var steps = dBs/lines;
 	    var exp = Math.floor(Math.log(steps) / Math.LN10);
 	    var stepnorm = steps / Math.pow(10, exp);
 	    var schritt = stepnorm* Math.pow(10, exp);
 	    var Numr = From; 	    
 	   for(var i=0;i<lines;i++,Numr-=schritt){
 		   var string = this.round(Numr*-1,1)+" dB";
 		   var x = i*xSpan;
 		   //Render the lines on the main canvas 
 		   ctx.beginPath();
 		   ctx.strokeStyle="white";
 		   ctx.moveTo(beginGrid+x, 0);
 		   ctx.lineTo(beginGrid +x, this.canvas_height);
 		   ctx.stroke();
 		   if (i>=1) {
 			   //Render the rotated text on cnavas begin in second line 
 			  ctx.drawImage(this.rotatateText(string),beginGrid+x+3,this.canvas_height-68); 
 		   }
 		}
 	  this.canvas_ctx.drawImage(c,beginGrid,0);
 	};

Die Methode wird aufgerufen. this.rotatateText rotiert die Zeichen um 90°.

Window.prototype.rotatateText = function(txt){
 		var c = document.createElement("canvas");
 		var ctx = c.getContext('2d');
 		c.width = 16;
 		c.height = txt.length*14;
 		ctx.rotate(90*Math.PI/180);
 	    ctx.font="12px Calibri";
 	    ctx.textAlign = "left";
 	    ctx.fillStyle="white";
 	    ctx.fillText(txt,20,0);	    
 	    return c;
 	};

Wenn ich ein Rotes Rechteck einfüge:
ctx.fillStyle = "red";
ctx.fillRect(0,0,80,this.canvas_height);
also noch vor der Schleife dann ist das Rechteck da wo es hin soll. Aber warum ist der Path nicht zu sehen und der rotierte String auch nicht??
Die For schleife funzt auch.
Wenn ich statt ctx, this.canvas_ctx neheme wird alles richtig angezeigt.
in der Konsole steht kein Fehler... alles komisch.
Weiß da einer weiter?

 

[xorg1990]

Alles klar hab's gefindet.
Ich hatte überall noch das beginGrid drinnen stehen das war der Fehler.

 

[SteelWheel]

Hey Xorg, ich schon wieder. ^^

Wenn Du ein ziemlich umfassendes Buch rund um Canvas benötigst: "HTML5 Canvas" - O'Reilly ... ISBN 978-1-449-39390 ... darin habe zumindest ich immer meine Lösungswege gefunden und ist ziemlich vollständig (Audio, Video, Sockets u. v. m.).

Grüße

 

[xorg1990]

Hi SteelWheel, gar nicht mitbekommen das noch Du noch geantwortet hast.
Habe nun doch ein Problem vielleicht kannst du helfen.

Vollendendes:

Ich habe in mein Window Objekt das "DecibelCanvas" global verfügbar gemacht:

var c = document.createElement("canvas");
var ctx = c.getContext('2d');
//......
//the grid ganvas must be globally, it's needed in the peak holding graph animation;
this.dB_GridCtx = ctx;
this.dbCanvas = c;

In der Methode drawAptitudeGraph greife ich drauf zu und möchte ein peak holding graph zeichnen, nur bekomme ich das nicht gelöst das über mein gitter gezeichnet wird.
Denn clearRect löscht mein gitter und beginnPath löscht auch mein Gitter. ctx.save(); funzt nicht bei Linien.

//alle x Sekunden 
 Window.prototype.drawAptitudeGraph  = function(){
    	 var ctx = this.dB_GridCtx;
    	 ctx.beginPath();

    	 /*
        render algo.
    	 */
    	 this.canvas_ctx.drawImage(this.dbCanvas,this.beginGrid,0);
     };

drawAptitudeGraph wird im selben Intervall ausgeführt wie der Wasserfall Scrollintervalli ist.

Meine Idee wäre im Konstruktor ein canvas zu erstellen und da via globalAlpha den Hintergrund transparent zu machen, auf diese canvas wird dann der Path gezeichnet, das canvas wird dann über das GitterCanvas gelegt.
Aber ich habe dann insgesamt 6 canvases für den Analyser... das ist alles andere als Ressourcen schonend.

Ein main canvas, was im DOM verankert ist.
das Wasserfall canvas (sind 2 ) sonst geht's nicht.
Eins für die Skala, 2 für die dB Anzeige.

Hat dazu einer 'ne alternative Idee?

 

[SteelWheel]

Da bin ich - weil Du mich anfänglich ansprichst - raus. Normalerweise habe ich ein Canvas; und darin spielt sich das/mein Spektakel ab. Ich weiß, was mein Zooming, Scrolling etc. für Spaß gemacht hat - ich will gar nicht wissen, wieviel Spaß Du bekommen würdest, wenn Du das jetzt auf verschiedene Geräte skalieren würdest wollen.

In einer Sache gebe ich Dir blind recht: echte Performance-Bremse!

Ich kenne Dein Konstrukt nicht - und auch nicht Deine Zielplattform(en). Aber: Ließe sich Dein Konstrukt umstellen? Könnte der "Wasserfall" bspw. ohne eigenes Canvas-Element (so habe ich Dich verstanden) entstehen? Wieviele "global vars" verwendest Du? Könntest Du diese Dinge nicht - für etwas Schonung - nicht besser alle einem Objekt var myMegaCanvas = {}; unterordnen? Dies ließe sich bequem (!) erweitern, warten, es verzichtet auf "global vars", Du kannst Methoden entnehmen usw. Damit hättest Du nur noch eine "global var" - der Rest ist Bienenstock-ähnlich darunter verteilt. Nicht nur ich empfehle immer, den "global scope" maximal klein zu halten. Vielleicht gibt das noch ein paar % Schub für Dein Tool ...

 

[xorg1990]

Ich kenne Dein Konstrukt nicht - und auch nicht Deine Zielplattform(en)

Zielplattform: only Desktop, da eh nur für Funkamateure interessant

Könnte der "Wasserfall" bspw. ohne eigenes Canvas-Element (so habe ich Dich verstanden) entstehen?

Der Wasserfall braucht 2 eigne Canvases zwischen den 2 canvasen wird ständig hin und her kopiert. Das Wassefall canvas wird dann auf das main canvas, was im dom ist gereedert.
Nach diesem Tutorial habe ich mich orientiert.

nicht besser alle einem Objekt var myMegaCanvas = {}; unterordnen?

Hm drauf bin ich noch nicht gekommen. Eigentlich hält sich das mit dem globalen vars in mein Window Objekt in grenzen. Es sind nur die canvases global(erstellt im konstruktor) und 3-5 variablen z.b die Position wo die Frequenzskala anfängt, die breite der Skala, damit ich weiß wo das dbGrid anfängt, ein paar fft Sachen.

Habe schon Skripte gesehen da sind im Konstruktor 100 variablen angelegt worden.

Nicht nur ich empfehle immer, den "global scope" maximal klein zu halten.

Nicht das wir uns Falsch verstehen, ich mein global im Window Objekt via this. Nicht global im sinn von globally-scoped.

Wie ich nun mein Path zeichne ohne das das Gitter verschwindet weiß ich immer noch nicht.