0

What possible integrations between languages and packages derived from or related to TeX (e.g.: PGF/TiKz and pstricks) currently exist that allow achieving the aesthetic effect of the figure below in an environment built with Web language (e.g.: Javascript, HTML, XML, CSS, MATHML, etc.)? My primary goal is to be able to use figures generated by PGF/TiKz or Pstricks within an HTML page such that it looks like something like the image generated by TiKz itself is done in Canvas by . I mean, I don't want the blank area around the figure generated by TiKz, but just the drawing. The image below has an image of the owl generated by the tikzlings package and a triangle generated by canvas. Note: Obviously the owl is a screen capture included as an image in the src key in HTML5. In fact, if I could use the tikzlings package figures directly as well as the canvas-generated triangle I wouldn't need to be asking that question.

Code full HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">

<script>
var myGamePiece;

var myBackground;

function startGame() {

    myGamePiece = new component(30, 30, "owl.png", 225, 225, "image");
    myObstacle  = new component(10, 200, "gray", 300, 120);    
    myGameArea.start();
    myBackground = new component(1345, 470, "forest.jpg", 0, 0, "image");
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 1345;
        this.canvas.height = 470;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
myBackground.newPos();    
     ctx.beginPath();

    ctx.moveTo(25,35.5);
    ctx.lineTo(35.5,50);
    ctx.lineTo(12.5,50);

    ctx.fill();

    }
}

function component(width, height, color, x, y, type) {

    this.type = type;
    if (type == "image") {
        this.image = new Image();
        this.image.src = color;
    }
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.speed = 0;
    this.angle = 0;
    this.moveAngle = 0;
    this.x = x;
    this.y = y;    

    this.update = function() {

        ctx = myGameArea.context;
    ctx.save();
        ctx.translate(this.x, this.y);

        ctx.rotate(this.angle);

        ctx.fillStyle = color;

     ctx.beginPath();

    ctx.moveTo(25,35.5);
    ctx.lineTo(35.5,50);
    ctx.lineTo(12.5,50);

    ctx.fill();

        ctx.restore();            
if (type == "image") {
            ctx.drawImage(this.image, 
                this.x, 
                this.y,
                this.width, this.height);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        ctx.restore();            
        }
        ctx.restore();            

    }
}

function updateGameArea() {
        myGamePiece.update();
    myBackground.newPos();    


}

</script>
</body>
</html>

Code for owl:

\documentclass{article}
\usepackage{tikzlings-owls,tikz}
\begin{document}
\begin{tikzpicture}
\owl
\end{tikzpicture}
\end{document}

e.g. image

  • 1
    Can you show the code (compilable document, not a fragment) that you used to generate the TikZ image? With the standalone class you can generate images with very tight borders. – Alan Munn Apr 28 at 22:56
  • 2
    Do you mean like this? pgf-tikz.github.io – Henri Menke Apr 28 at 23:00
  • Hi @HenriMenke, I want to integrate keyboard control features like this link w3schools.com/graphics/game_controllers.asp, but I want to use images generated by TiKz and not by canvas. – Diego Bnei Noah Apr 28 at 23:08
  • 2
    You can use tex4ht (and make4ht) to convert pstricks and tikz diagrams into HTML. – Andrew Apr 29 at 0:12
  • 1
    You can generate pdfs with LaTeX and use Inkscape to convert those to svg, which you can use in a web application. With a bit of trouble you might be able to set up a tool chain to compile and convert the images on page load (or even during the application if it is not a game, e.g., a math tutorial), but probably it is easier to compile the things that you need manually a single time during development. If you want it to be more native, you can check the drawing commands used for the images (i.e., the owl) and 'translate' them manually to Canvas commands (not always possible of course). – Marijn Apr 29 at 6:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.