Search code examples
javascripthtmltemplatescanvasmediawiki

How to put html <canvas> in a Mediawiki page

My question is about inserting <canvas></canvas> into a mediawiki page.

(Edit: This codes works, but it takes about 5 minutes for it to register, see below for full answer)

I was able to put a javascript "Hello World" out put onto my mediawiki site.

To do so I have the following:

  1. In my MediaWiki:Common.js page I have:
(function () {

  var myElement = document.getElementById('mw-hello-world');
  myElement.innerHTML = '<html>Hello World!!!</html>';

}());
  1. In my Template:Helloworld page I have:
<div id="mw-hello-world"></div>
  1. In my main page I have:
{{Helloworld}}

I now want to put a <canvas></canvas> on my main page. A guy at Mediawiki called Bawolff said the following

"You would need to write an extension 
(Or put it entirely in a javascript file like the page MediaWiki:Common.js on your wiki)"

The problem is, <canvas></canvas> doesn't work by itself on any page. So I am wondering where to put <canvas></canvas>. As you all can tell, I'm not a real programmer, so I was hoping for some ideas. Thanks

Aslo, I did try doing the above, but with the code:

(function () {

  var myElement = document.getElementById('mw-Mycanvas');
  myElement.innerHTML = '<html><canvas width="200" height="100" style="border:1px solid red;"></canvas></html>';

}());
And then changing everything appropriately. But it just comes up as blank. But if I do this in HTML I get a red box.
Solution

  • This is the way to go:

    const canvas = document.createElement('canvas');
document.getElementById('your-id').appendChild(canvas);

    Or:

    document.getElementById('your-id').innerHTML = '<canvas></canvas>';

    References: