myGully.com - [gelöst] Javascript in Joomla

Hi Zusammen.

Ich habe seit kurzem Joomla (Version 1.7.0) für mich entdeckt und bin auf dem Gebiet noch ein blutiger Anfänger.
Ich möchte auf meiner Homepage Javas*****, oder genauer gesagt eine Canvas-Animation einbinden.

Der Code steht und funktioniert auch:

Doch auf meiner von Joomla verwaltetetn Seite funktioniert es nicht.

Folgende Editoren habe ich ausprobiert:
- JCE (Javas***** auf "erlaubt" gesetzt)
- TinyMCE (Javas***** aus der Liste der verbotenen Elemente gelöscht)
- Kein Editor

Doch ich habe immer nur einen Auszug aus dem Javacode auf der Website gesehen

Dann habe ich noch die Globalen Beitragsoptionen angepasst. Die lassen Javas***** jetzt auch zu.
Jetzt habe ich keine Codeschnipsel mehr, sondern einfach nur noch einen leeren Kasten.

So sieht es momentan aus:

Ein weiteres Problem ist, dass ich bei meiner alten Seite (komplett selber gecodetes html&css) im <body> via "onload" meine Funktion aufgerufen hab, die mein Canvas animieren sollte. :

Code:

<body onload="drawcanvas();">

Aber in Joomla, habe ich keinen Zugriff auf das <body>-Element und im <canvas> element kann ich (soweit ich weiß) besagte Funktion nicht aufrufen.

Code:

<canvas onload="drawcanvas();">

Ich hoffe ihr könnt mir helfen, dass ich meine Animation auch auf meiner neuen Seite genießen kann :P

Abschließend noch der Code:

Code:

<s***** type="text/javas*****">

var changeRectangle1 = 20;

                var changeRectangle2 = 20;

                var changeCircle1 = -20;

                var changeCircle2 = 20;

                var colour1 = 20;

                var colour2 = 0;

                var colour3 = 10;

                var circleOpacity = 0.5;



                function Rectangle(x, y, width, height, borderWidth) {

                        this.x=x;

                        this.y=y;

                        this.width = width;

                        this.height = height;

                        this.borderWidth = borderWidth;

                }



                function Circle(x, y, rad) {

                        this.x = x;

                        this.y = y;

                        this.rad = rad;

                }



                function drawme() {

                      var elem = document.getElementById("myCanvas");



                      if (elem.getContext) {

                        myCircle = new Circle(20, elem.getContext("2d").canvas.height-20, 20);

                        myRectangle = new Rectangle(0,0,100,50,2);

                        setInterval(draw,10);

                      }

                }

                

                function draw(){

                                var ctx = document.getElementById("myCanvas").getContext("2d");

                                ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);

                                //ctx.fillStyle = "rgba(255, 0, 0, 0.75)";

                                var currentColour = "rgba(" + colour1 + "," + colour2 + "," + colour3 + ", 0.75)"; 

                                ctx.fillStyle = currentColour;

                                ctx.strokeStyle= "rgba(0,0,0, 0.75)";

                                ctx.lineWidth=myRectangle.borderWidth;

                                ctx.save();



                                ctx.fillRect(myRectangle.x,myRectangle.y,myRectangle.width,myRectangle.height);

                                ctx.strokeRect(myRectangle.x,myRectangle.y,myRectangle.width,myRectangle.height);



                                var currentOpacity = "rgba(255,255,0," + circleOpacity + ")";

                                ctx.fillStyle = currentOpacity;



                                ctx.beginPath();

                                ctx.arc(myCircle.x,myCircle.y,myCircle.rad,0,Math.PI*2,true);

                                ctx.fill();



                                ctx.restore();

                                var currentRectangleX = myRectangle.x;

                                var currentRectangleY = myRectangle.y;

                                myRectangle.x = currentRectangleX + changeRectangle1;

                                myRectangle.y = currentRectangleY + changeRectangle2;





                                if (currentRectangleX >= (ctx.canvas.width - myRectangle.width - myRectangle.borderWidth)) {

                                        changeRectangle1 = -1;

                                        colour1 += 10;

                                        if (colour1 > 255) { colour1 = 0;}

                                }

                                if (currentRectangleX <= (myRectangle.borderWidth)) {

                                        changeRectangle1 = 1;

                                        colour2 += 20;

                                        if (colour2 > 255) { colour2 = 0;}

                                }



                                if (currentRectangleY >= (ctx.canvas.height - myRectangle.height - myRectangle.borderWidth)) {

                                        changeRectangle2 = -1;

                                        colour3 += 5;

                                        if (colour3 > 255) { colour3 = 0;}

                                }

                                if (currentRectangleY <= (myRectangle.borderWidth)){

                                        changeRectangle2 = 1;

                                        colour3 += 5;

                                        if (colour3 > 255) { colour3 = 0;}

                                }



                                var currentCircleX = myCircle.x;

                                var currentCircleY = myCircle.y;

                                myCircle.x = currentCircleX + changeCircle2;

                                myCircle.y = currentCircleY + changeCircle1;





                                if (currentCircleX >= (ctx.canvas.width - myCircle.rad)) {

                                      changeCircle2 = -2;

                                      circleOpacity += 0.1;

                                }

                                if (currentCircleX <= myCircle.rad) {

                                      changeCircle2 = 2;

                                      circleOpacity += 0.1;

                                }



                                if (currentCircleY >= (ctx.canvas.height - myCircle.rad)) {

                                      changeCircle1 = -2;

                                      circleOpacity += 0.1;

                                }

                                if (currentCircleY <= myCircle.rad){

                                      changeCircle1 = 2;

                                      circleOpacity += 0.1;

                                }



                                if (circleOpacity >= 1.0) { circleOpacity = 0.1;}



                }





                  

                function drawLine(ctx,elem){

                        ctx.moveTo(0,0);

                        ctx.lineTo(elem.width, elem.height);

                        ctx.stroke();

                }

</s*****>





<article onload="drawme();">Here is a small canvas animation</article>

<p><br /> 

<canvas id="myCanvas" width="584" height="300"></p>

   <p>Sry, but your browser isn't supporing canvas.<br /> Here should appear some moving objects.</p>

</canvas>

<p>&nbsp;</p>

Oder einfach auf der funktionierenden Seite den Seitenquelltext aufrufen ;)