FillRect() is to draw a rectangle. How do I draw a triangle?

Question

Basically, I have a chunk draws a simple square into the canvas, and with ur mouse, you can rotate left and right and move in the direction you are facing. Here is what it looks like:

var myGamePiece;

function startGame() {
    myGamePiece = new component(30, 30, "red", 225, 225);
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            e.preventDefault();
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
    },
    stop : function() {
        clearInterval(this.interval);
    },    
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

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

    this.type = type;
    this.width = width;
    this.height = height;
    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.fillRect(this.width / -2, this.height / -2, this.width, this.height);
        ctx.restore();    
    }
    this.newPos = function() {
        this.angle += this.moveAngle * Math.PI / 180;
        this.x += this.speed * Math.sin(this.angle);
        this.y -= this.speed * Math.cos(this.angle);
    }
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.moveAngle = 0;
    myGamePiece.speed = 0;
    if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.moveAngle = -1; }
    if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.moveAngle = 1; }
    if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speed= 1; }
    if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speed= -1; }
    myGamePiece.newPos();
    myGamePiece.update();
}

canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body onload="startGame()">
</body>
</html>

Test it out on Codepen!

What about if I wanted to draw a triangle instead? What I do instead? I tried researching something like FillTri or FillTriangle, and I stumbled upon this, which does draw a Triangle:

ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();

But the Game Piece is stuck in place if you draw a triangle. How can I fix this?

I don't get the problem, those last 4 lines do exactly what you are looking for... — Alberto Sinigaglia, Aug 24 '22 at 00:52
Does this answer your question? [Moving a triangular ship in a canvas game in plain JS](https://stackoverflow.com/questions/58567392/moving-a-triangular-ship-in-a-canvas-game-in-plain-js/58568340#58568340) — ggorlen, Aug 24 '22 at 00:53
You can't hardcode in the coordinates--you'll need to make it relative to `this.x` and `this.y`. — ggorlen, Aug 24 '22 at 00:54
@ggorlen yes it does, although the turn is a bit fast, and doesn't support going backwards, ill find out how to fix it. — gamer merch, Aug 24 '22 at 01:12
Just use the triangle/drawing portion of the code and keep your physics as is. Adjust the triangle to match your use case as needed. — ggorlen, Aug 24 '22 at 01:40

FillRect() is to draw a rectangle. How do I draw a triangle?

0 Answers0