SKI_V2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="mojokvir" width="600" height="400" style="border:1px solid #000000">
    <!-- unutar canvas koordinate su u americkom stilu... -->
    <script>
        var c = document.getElementById("mojokvir");
        var ctx = c.getContext("2d");

        ctx.fillStyle="#ff0000";
        ctx.fillRect(0,0,150,100);

        ctx.fillStyle="#8328ff";
        ctx.fillRect(150,100,250,200);

        grd=ctx.createLinearGradient(250,0,350,100); <!--gradijent pod uglom-->
        grd.addColorStop(0.5,"blue");
        grd.addColorStop(1,"green");
        ctx.fillStyle=grd;
        ctx.fillRect(250,0,350,100);

        ctx.beginPath();
        ctx.moveTo(100,100); <!-- pomera beginpath do 100 100 -->
        ctx.lineTo(200,200); <!-- linija ide do -->
        ctx.lineTo(340,120);
        ctx.closePath();
        grd2=ctx.createLinearGradient(100,100,180,50);
        grd2.addColorStop(0.5,"red");
        grd2.addColorStop(1,"yellow");
        ctx.fillStyle=grd2;
        ctx.fill();  /*puni linepath (ili bilo sta)*/
        ctx.stroke();

        ctx.font="18px Arial";
        ctx.save();
        ctx.fillStyle="#00ffff"
        ctx.textAlign="start"; /*end - pozicija gde se zavrsava tekst, kad je start tamo gde pocinje tekst*/
        ctx.shadowColor="gray";
        ctx.shadowOffsetX=4;
        ctx.shadowOffsetY=5;
        ctx.shadowBlur=3;
        ctx.rotate(-(Math.PI/180)*5)
        ctx.fillText("TEKSTUALNI POPUNJENI TEKST",50,50);
        ctx.strokeText("TEKSTUALNI SKROL TEKST", 300,300);
        for(i = 100;i < 500;i+=35){
            ctx.fillText("TEKSTUALNI POPUNJENI TEKST",i,i);
            ctx.strokeText("TEKSTUALNI SKROL TEKST", i+50,i+50);
        }
        ctx.restore();
        ctx.fillText("EVERY DAY WE STRAY FURTHER FROM GOD", 10 ,400)

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


///////////////////////////////////////////////vezba2 zadatak

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="mojokvir" width="300" height="300" style="border:1px solid #000000">
    <script>
        var c = document.getElementById("mojokvir");
        var ctx = c.getContext("2d");

        ctx.beginPath();
        ctx.moveTo(100,100); <!-- pomera beginpath do 100 100 -->
        ctx.lineTo(200,100); <!-- linija ide do -->
        ctx.lineTo(200,200);
        ctx.closePath();
        grd2=ctx.createLinearGradient(100,100,200,200);
        grd2.addColorStop(0.5,"green");
        grd2.addColorStop(1,"yellow");
        ctx.fillStyle=grd2;
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(100,100); <!-- pomera beginpath do 100 100 -->
        ctx.lineTo(100,200); <!-- linija ide do -->
        ctx.lineTo(200,200);
        ctx.closePath();
        ctx.fillStyle="red";
        ctx.fill()

        ctx.fillStyle="black";
        ctx.rotate(-(Math.PI/180)*5)
        ctx.font="18px Arial";
        ctx.fillText("TEKST1",200,100);

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