CODEWITHSUNDEEP
html
user1105147
user1105147

Reputation: 1

Triangle with Coordinates?

How would I build a triangle with coordinates using HTML5 like in this applet? Is this even possible?

Any guidance would be great.

Upvotes: 0

Views: 315

Answers (1)

Dan
Dan

Reputation: 1559

You will need HTML5's canvas element and also JavaScript. This should do the trick:

<canvas id="canvasId" width="165px" height="145px"></canvas>

<script type="text/javascript"><!--
    window.addEventListener('load', function () {

        var context = document.getElementById("canvasId").getContext("2d");

        var width = 125;  // Triangle Width
        var height = 105; // Triangle Height
        var padding = 20;

        // Draw a path
        context.beginPath();
        context.moveTo(padding + width/2, padding);        // Top Corner
        context.lineTo(padding + width, height + padding); // Bottom Right
        context.lineTo(padding, height + padding);         // Bottom Left
        context.closePath();

        // Fill the path
        context.fillStyle = "#ffc821";
        context.fill();

    }, false);
// --></script>

Upvotes: 2

Related Questions