Using TikZ in a browser like MathJax

Question

I'm guessing this has been done in a thread before, but I've just spent two hours reading various threads and cannot get my head around a very basic question.

Long story short: I'm trying to create dynamic equations/diagrams in a web browser for a homework generator. So far I've been using MathJax and loving it for the equation side of things. It's very simple as I just need to include a single line of Javascript code and then I'm good to start coding:

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['|','|'], ['\\ 
(','\\)']]}});
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX- AMS-MML_HTMLorMML">
</script>

<?
$x = rand(2,5);
echo "x|^2| = ".pow($x,2).", so x = |\pm|$x";
?>

And it correctly turns that into the equation form on the browser.

Now, my goal is to do the same sort of thing with TikZ so I can create triangles and so forth on the fly using code like:

<?
$vertex1 = rand(2,5);
$vertex2 = rand(2,5);
?> 
\documentclass[12pt, border=5mm]{standalone}
\usepackage{tikz}
\begin{document}
\begin{tikzpicture}
\draw (0,0) node[anchor=north]{$A$}
  -- (<? echo $vertex1; ?>,0) node[anchor=north]{$C$}
  -- (<? echo $vertex1; ?>,<? echo $vertex2; ?>) node[anchor=south]{$B$}
  -- cycle;
\end{tikzpicture}
\end{document}

So my first question, which I think is answered "no" but is worth checking anyhow - is there a simple way to call TikZ in Javascript as with MathJax? Because that would be amazing.

If not, how can I get to a place where I can actually use TikZ from HTML/Javascript? I believe that some websites show TikZ code, but I cannot find any documentation on this (everything just assumes I'm using a LaTeX program that can summon TikZ with a simple \usepackage{tikz} call, which I don't think MathJax can do).

For now, I'm running my scripts on a localhost my Macbook via MAMP, but eventually I would like to move it to an actual web server - but if it comes down to needing to install it at a root level, I can look into that. Just need some clear explanations since I'm really new to the technical side of LaTeX.

Answer 1

Yes, you can run TikZ in JavaScript via https://github.com/kisonecat/tikzjax and get SVG output. After loading the appropriate CSS and JavaScript, it converts

<script type="text/tikz">
  \begin{tikzpicture}
    \draw (0,0) circle (1in);
  \end{tikzpicture}
</script>

into the expected SVG.

TikZJax works by actually running TeX itself in the browser. With web2js the Pascal source of e-TeX is compiled down to WebAssembly; running under node, the latex format is loaded (without all the hyphenation data), and

\documentclass[margin=0pt]{standalone}
\def\pgfsysdriver{pgfsys-ximera.def}
\usepackage{tikz}

is executed. Then memory is dumped; by reloading the dumped memory in the browser, it is possible to very quickly get to a point where TikZ has been loaded. (This amounts to playing the virtex and initex game, but in the browser.) By using an SVG driver for PGF along with dvi2html, the DVI output is converted to an SVG.

All of this really happens in the browser! If you go to http://tikzjax.com/ and open the web console, you'll see the familiar output

This is e-TeX, Version 3.14159265-2.6 (preloaded format=latex 2019.2.22)