Any way to make a radial gradient in an oval in javascript?

Question

So, at the moment I'm working on a small project that displays the isometric space of a tile using diamonds that have a height: width ratio of 1: 2.

I plan to make a “shield” effect above them, basically putting more and more blue closer to the edges, with the inner circle transparent to create the illusion of a translucent sphere above it.

For this I use a radial gradient.

Currently, my canvas on rendering is as follows:

And my code looks like this:

var gradient = ctx.createRadialGradient(450, tileheight * 5 / 2, 100, 450, tileheight * 5 / 2, 200);
gradient.addColorStop(0, "rgba(0, 0, 55, 0.5)");
gradient.addColorStop(1, "rgba(10, 10, 55, 0.8)");
drawdiamond(gradient, 450, 0, tilewidth * 5, tileheight * 5);

If drawdiamond is a function that draws tiles, this function draws a diamond the size of a map with the gradient specified by the gradient variable.

- , 100 50.

, , , , , , .

ctx.setPattern, , , , , .

, ?

(, ).

Answer 1

, , , , ctx.transform, 0,5, , .

, !

var gradient = ctx.createRadialGradient(450, tilewidth * mapsize / 2, 100, 450, tilewidth * mapsize / 2, 200);
gradient.addColorStop(0, "rgba(0, 0, 55, 0.5)");
gradient.addColorStop(1, "rgba(10, 10, 55, 0.8)");
ctx.setTransform(1, 0, 0, 0.5, 0, 0);
drawdiamond(gradient, 450, 0, tilewidth * mapsize, tilewidth * mapsize);
ctx.setTransform(1, 0, 0, 1, 0, 0);

, , , .

- , .

.