index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Penskalaan</title>
    <style>
        canvas {
            border: 2px solid #000;
        }
    </style>
    <script src="transform.js"></script>
    <script src="grafika_lib.js"></script>
</head>
<body>
    <canvas id="canvas1" width="400" height="400"></canvas>
    <script>
        var canvasKita;
        canvasKita = document.querySelector("#canvas1");
        var ctx;
        ctx = canvasKita.getContext("2d");
        var imageDataSaya = ctx.getImageData(0, 0, canvasKita.width, canvasKita.height);

        var point_array = [
            {x:100,y:100},
            {x:150,y:150},
            {x:50,y:150},
        ];

        polygon(imageDataSaya, point_array, 0,255,0);

        // Translasi
        // var point_array2 = [];
        // var temp = translasi(point_array[0], {x:100,y:0});
        // point_array2.push(temp);
        // temp = translasi(point_array[1], {x:100,y:0});
        // point_array2.push(temp);
        // temp = translasi(point_array[2], {x:100,y:0});
        // point_array2.push(temp);

        // polygon(imageDataSaya, point_array2, 0,255,0);


        // var point_array3 = [];
        // var temp = penskalaan(point_array[0], {x:100,y:0});
        // point_array3.push(temp);
        // temp = penskalaan(point_array[1], {x:100,y:0});
        // point_array3.push(temp);
        // temp = penskalaan(point_array[2], {x:100,y:0});
        // point_array3.push(temp);

        // polygon(imageDataSaya, point_array3, 0,0,255);

        ctx.putImageData(imageDataSaya, 0, 0);
    </script>
</body>
</html>