Question 43847 in Html Question posted in
Some basic documentation can be found here.

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.
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ok. The code I wrote actually does work. But I guess there was some kind of delay, of about 5 minutes. I don't know. I will try InSync's suggestions also and post the results. Thanks

    I wrote the following:

    1. In MediaWiki:Common.js:
    (function () {

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

}());
    1. In Template:Mycanvas I wrote:
    <div id="mw-Mycanvas"></div>
    1. Im Main Page I wrote:
    {{Mycanvas}}

  2. 0

    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:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search