layout/reftests/svg/radialGradient-basic-03-ref.html

   1 <!--
   2      Any copyright is dedicated to the Public Domain.
   3      http://creativecommons.org/publicdomain/zero/1.0/
   4 -->
   5 <head>
   6     <title>Reference for gradient</title>
   7     <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=441780 -->
   8 </head>
   9 <body onload="go()">
  10 <canvas width="400" height="400"></canvas>
  11 <style>
  12 * { margin: 0; }
  13 </style>
  14 <script>
  15 function go() {
  16   let canvas = document.querySelector('canvas');
  17   let ctx = canvas.getContext('2d');
  18
  19   function createCircleWithGradient(x, y, r, fx, fy) {
  20     let gradient = ctx.createRadialGradient(fx, y, 0, x, y, r);
  21     gradient.addColorStop(0, 'lime');
  22     gradient.addColorStop(1, 'red');
  23
  24     ctx.beginPath();
  25     ctx.arc(x, y, 50, 0, 2 * Math.PI);
  26
  27     ctx.fillStyle = gradient;
  28     ctx.fill();
  29   }
  30
  31   createCircleWithGradient(100, 100, 50, 50);
  32   createCircleWithGradient(100, 200, 40, 60);
  33   createCircleWithGradient(200, 100, 50, 250);
  34   createCircleWithGradient(200, 200, 70, 280);
  35 }
  36 </script>
  37 </body>