Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 159
  • Last Modified:

HTML - Canvas draw a gradient box

Hi..
I have code that places an X  (draws an X) based on x,y coordinates.  How can I do the same but fill the area with a gradient box instead.
Here's the 'X' code.
thx

   var ctx = canvas.getContext('2d');
          ctx.moveTo(x1, y1);
          ctx.lineTo(x2 + 1, y2 + 1);
          ctx.lineWidth = 4;
          ctx.strokeStyle = 'green';
          ctx.stroke();

          ctx.beginPath();
          ctx.moveTo(x2, y1);
          ctx.lineTo(x1 + 1, y2 + 1);
          ctx.lineWidth = 4;
          ctx.strokeStyle = 'red';
          ctx.stroke();
0
JElster
Asked:
JElster
  • 3
  • 3
1 Solution
 
Robert SchuttSoftware EngineerCommented:
Please try this:
          var ctx = canvas.getContext('2d');
          ctx.moveTo(x1, y1);
          ctx.lineTo(x2 + 1, y2 + 1);
          ctx.lineWidth = 4;
          //ctx.strokeStyle = 'green';
          var grd = ctx.createLinearGradient(x1, y1, x2, y2);
          grd.addColorStop(0, "#FF0000");
          grd.addColorStop(0.5, "#00FF00");
          grd.addColorStop(1, "#0000FF");
          ctx.strokeStyle = grd;
          ctx.stroke();

          ctx.beginPath();
          ctx.moveTo(x2, y1);
          ctx.lineTo(x1 + 1, y2 + 1);
          ctx.lineWidth = 4;
          //ctx.strokeStyle = 'red';
          var grd2 = ctx.createLinearGradient(x1, y2, x2, y1);
          grd2.addColorStop(0, "#FF0000");
          grd2.addColorStop(0.5, "#00FF00");
          grd2.addColorStop(1, "#0000FF");
          ctx.strokeStyle = grd2;
          ctx.stroke();

Open in new window

0
 
JElsterAuthor Commented:
How can I fill in the whole area in gradient.
1 big gradient box.
thx!
0
 
Robert SchuttSoftware EngineerCommented:
You can use the gradient as strokeStyle or fillStyle just like using a color, for example:
          ctx.rect(0, 0, canvas.width, canvas.height);
          var grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
          grd.addColorStop(0, "#FF0000");
          grd.addColorStop(0.5, "#00FF00");
          grd.addColorStop(1, "#0000FF");
          ctx.fillStyle = grd;
          ctx.fill();

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
JElsterAuthor Commented:
Sorry I mean the area of the X & Y
thx again
0
 
Robert SchuttSoftware EngineerCommented:
Ok, perhaps try this then:
          ctx.beginPath();
          ctx.rect(x1, y1, x2 - x1 + 1, y2 - y1 + 1);
          var grd4 = ctx.createLinearGradient(x1, y1, x2, y2);
          grd4.addColorStop(0, "#FF0000");
          grd4.addColorStop(0.5, "#00FF00");
          grd4.addColorStop(1, "#0000FF");
          ctx.fillStyle = grd4;
          ctx.fill();

Open in new window

Note the difference between using corners for the gradient and top/left, width/height for rect.
0
 
JElsterAuthor Commented:
thx again!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now