bebraw
7/21/2010 - 9:59 AM

linear.htm

linear.htm
content_copyfile_download
<html>
    <head>
        <title>Linear Gradient Test</title>
        <script type="text/javascript">
            function draw() {
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");

                // set up gradient
                var grad = ctx.createLinearGradient(0, 0,
                    canvas.width, canvas.height);
                grad.addColorStop(0, 'yellow');
                grad.addColorStop(0.4, 'green');
                grad.addColorStop(0.8, 'black');
                grad.addColorStop(1, 'black');

                // draw gradient
                ctx.fillStyle = grad;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
            }
        </script>
    </head>
    <body onload="draw()">
    <canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>