CODEWITHSUNDEEP
javascripthtmlcss
Gari Jaen
Gari Jaen

Reputation: 33

gradient in to circle

<head>
    <title></title>
</head> 

<body>
    <canvas id="mycanvas" width="800" height="600" style="border: 1px solid black;">
        upload yor browser old man!
    </canvas>

    <script type="text/javascript">

        var c = document.getElementById("mycanvas");
        var cxt = c.getContext( "2d" );

        grad = cxt.createLinearGradient( 0 , 0 , 200 , 200 );

        grad.addColorStop( 0 , "blue" );
        grad.addColorStop( 1 , "green" );

        cxt.fillStyle = grad;
        cxt.arc( 400 , 300 , 250  , 0 , Math.PI * 2 , true );
        cxt.fill();
    </script>

</body>

im trying to put the gradient in to the circle, the problem is the circle is just green the gradient loose the blue color or maybe the gradient is not working. thank you.

Upvotes: 0

Views: 44

Answers (2)

Ishan Madhusanka
Ishan Madhusanka

Reputation: 791

Your gradient is working fine..

try changin the gradient starting and ending coordinates, like...

grad = cxt.createLinearGradient( 275, 175, 525, 425);

.. so that the gradient lies within the circle.

Upvotes: 0

Kaiido
Kaiido

Reputation: 136698

It is because your gradient ends before your circle starts : 

        var c = document.getElementById("mycanvas");
        var cxt = c.getContext( "2d" );

        grad = cxt.createLinearGradient( 0 , 0 , 200 , 200 );

        grad.addColorStop( 0 , "blue" );
        grad.addColorStop( 1 , "green" );

        cxt.fillStyle = grad;
        cxt.rect(0,0,c.width, c.height);
        cxt.fill();
        cxt.strokeStyle = "#000";
        cxt.arc( 400 , 300 , 250  , 0 , Math.PI * 2 , true );
        cxt.fill();
        cxt.stroke();
<canvas id="mycanvas" width="800" height="600" style="border: 1px solid black;">
    </canvas>

Upvotes: 1

Related Questions