Joomla 2.5, can´t put canvas element into article

Question

Upon request I created a little HTML5 canvas animation for Christmas (so, tomorrow) and now I am trying to put it into an article. I am using JCE and turned off textfiltering in the configuration of Joomla itself and also in my editor profile. I even added canvas to the exceptions. When I copy my code to the article everything works fine, except that on toggle or save, it removes my canvas-element and replaces it with  . JS and CSS stay and the div I use as a container for my canvas also stays.

JS fires until ALERT1.

var canvas = document.getElementById("canvas");
alert("ALERT1");
var ctx = canvas.getContext("2d");
alert("ALERT2");

Any suggestions?

Answer 1

Rather than trying to add your Javascript in the article which may not parse correctly, I would suggest using a 3rd party plugin to add it such as Sourcerer.

Once installed, you can add the following into your article:

{source}
    <script>
        var canvas = document.getElementById("canvas");
        alert("ALERT1");
        var ctx = canvas.getContext("2d");
        alert("ALERT2");
    </script>
{/source}

Answer 2

I often use a free module called Custom HTML Advanced when I need to add custom code to Joomla. This module is similar to the built-in Custom HTML module, but with a couple of improvements:

• No filtering (even for script tags);
• Override module position chrome to remove unwanted wrapping HTML code around the module;
• Add custom CSS code into HTML header for pages where the module is enabled.

Simply create a module with your code, publish it to a custom position (e.g. MyCustomPosition), and add the following text to your article wherever you want the module to be loaded (this can be done directly in the TinyMCE editor):

{loadposition MyCustomPosition}

Answer 3

JCE Editor

When you are editing the article, click on Toggle Editor once and add the code including <canvas id="canvas"></canvas>. Then do NOT click on Toggle Editor again; just click on Save button. The article will be saved without stripping the canvas tag.

The result should be:

Note: As user @johanpw mentioned, the code may be cleaned up next time you save the article. You'd have to keep a copy of the entire source code elsewhere.

TinyMCE Editor

Go to "Extensions" -> "Plug-in Manager". Click on "Editor - TinyMCE". Inside "Basic Options" add canvas[*] to "Extended Valid Elements" field.

Now you can add <canvas id="canvas">-</canvas> to your article's html source.