Web | This Site

HTML-5 Tutorial
HTML5 Tag Reference
HTML5 Useful References
HTML5 Tools
HTML5 Resources
Selected Reading
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# HTML5 Canvas - Create Gradients

HTML5 canvas allows us to fill and stroke shapes using linear and radial gradients using the following methods:

SN | Method and Description
--- | ---
1 | addColorStop(offset, color) This method adds a color stop with the given color to the gradient at the given offset. Here 0.0 is the offset at one end of the gradient, 1.0 is the offset at the other end.
2 | createLinearGradient(x0, y0, x1, y1) This method returns a CanvasGradient object that represents a linear gradient that paints along the line given by the coordinates represented by the arguments. The four arguments represent the starting point (x1,y1) and end point (x2,y2) of the gradient.
3 | createRadialGradient(x0, y0, r0, x1, y1, r1) This method returns a CanvasGradient object that represents a radial gradient that paints along the cone given by the circles represented by the arguments. The first three arguments define a circle with coordinates (x1,y1) and radius r1 and the second a circle with coordinates (x2,y2) and radius r2.

# Linear Gradient Example:

Following is a simple example which makes use of above mentioned methods to create Linear gradient.

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript">
    function drawShape(){
      // get the canvas element using the DOM
      var canvas = document.getElementById('mycanvas');

      // Make sure we don't execute when canvas isn't supported
      if (canvas.getContext){

        // use getContext to use the canvas for drawing
        var ctx = canvas.getContext('2d');

        // Create Linear Gradients
        var lingrad = ctx.createLinearGradient(0,0,0,150);
        lingrad.addColorStop(0, '#00ABEB');
        lingrad.addColorStop(0.5, '#fff');
        lingrad.addColorStop(0.5, '#66CC00');
        lingrad.addColorStop(1, '#fff');

        var lingrad2 = ctx.createLinearGradient(0,50,0,95);
        lingrad2.addColorStop(0.5, '#000');
        lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

        // assign gradients to fill and stroke styles
        ctx.fillStyle = lingrad;
        ctx.strokeStyle = lingrad2;
        // draw shapes
        ctx.fillRect(10,10,130,130);
        ctx.strokeRect(50,50,50,50);
      } else {
        alert('You need Safari or Firefox 1.5+ to see this demo.');
      }
    }
    </script>
    </head>
    <body onload="drawShape();">
       <canvas id="mycanvas"></canvas>
    </body>
    </html>

The above example would produce following result

To learn above concept - Do Online Practice using latest version of either Safari or Opera.

# Radial Gradient Example:

Following is a simple example which makes use of above mentioned methods to create Radial gradient.

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript">
    function drawShape(){
      // get the canvas element using the DOM
      var canvas = document.getElementById('mycanvas');

      // Make sure we don't execute when canvas isn't supported
      if (canvas.getContext){

        // use getContext to use the canvas for drawing
        var ctx = canvas.getContext('2d');

        // Create gradients
        var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
        radgrad.addColorStop(0, '#A7D30C');
        radgrad.addColorStop(0.9, '#019F62');
        radgrad.addColorStop(1, 'rgba(1,159,98,0)');

        var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
        radgrad2.addColorStop(0, '#FF5F98');
        radgrad2.addColorStop(0.75, '#FF0188');
        radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

        var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
        radgrad3.addColorStop(0, '#00C9FF');
        radgrad3.addColorStop(0.8, '#00B5E2');
        radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

        var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
        radgrad4.addColorStop(0, '#F4F201');
        radgrad4.addColorStop(0.8, '#E4C700');
        radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

        // draw shapes
        ctx.fillStyle = radgrad4;
        ctx.fillRect(0,0,150,150);
        ctx.fillStyle = radgrad3;
        ctx.fillRect(0,0,150,150);
        ctx.fillStyle = radgrad2;
        ctx.fillRect(0,0,150,150);
        ctx.fillStyle = radgrad;
        ctx.fillRect(0,0,150,150);
      } else {
        alert('You need Safari or Firefox 1.5+ to see this demo.');
      }
    }
    </script>
    </head>
    <body onload="drawShape();">
       <canvas id="mycanvas"></canvas>
    </body>
    </html>

The above example would produce following result

To learn above concept - Do Online Practice using latest version of either Safari or Opera.

Advertisement

Online Image Processing

Indian Baby Names