By the way, isn't there already an ellipse method?
CanvasRenderingContext2D: ellipse() method - Web APIs | MDN
Edit* OK it seems the article was written in 2012, and the method was added in 2013.
JavaScript: // ******************* CIRCLE/OVAL SHAPE ***********************************
// from http://scienceprimer.com/draw-oval-html5-canvas
/**
* @param {Number} centerX
* @param {Number} centerY
* @param {Number} xradius
* @param {Number} yradius
* @param {String} color1
*/
Bitmap.prototype.FillCircle = function (centerX, centerY, xradius, yradius, color1) {
centerX = centerX + lightMaskPadding;
let context = this._context;
context.save();
context.fillStyle = color1;
context.beginPath();
let rotation = 0;
let start_angle = 0;
let end_angle = 2 * Math.PI;
for (let i = start_angle * Math.PI; i < end_angle * Math.PI; i += 0.01) {
xPos = centerX - (yradius * Math.sin(i)) * Math.sin(rotation * Math.PI) + (xradius * Math.cos(i)) * Math.cos(rotation * Math.PI);
yPos = centerY + (xradius * Math.cos(i)) * Math.sin(rotation * Math.PI) + (yradius * Math.sin(i)) * Math.cos(rotation * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.fill();
context.closePath();
context.restore();
this._setDirty();
};
JavaScript: CanvasGradient.prototype.addTransparentColorStops1 = function (brightness, color1, color2) {//console.log('...')
if (brightness) {
if (!useSmootherLights) {
var alpha = Math.floor(brightness * 100 * 2.55).toString(16);
if (alpha.length < 2) {
alpha = "0" + alpha;
}
this.addColorStop(0, '#FFFFFF' + alpha);
}
}
if (useSmootherLights) {
for (let distanceFromCenter = 0; distanceFromCenter < 1; distanceFromCenter += 0.1) {
let data = hexToRgb(color1);
var newRed = data.r - (distanceFromCenter * 100 * 2.55);
var newGreen = data.g - (distanceFromCenter * 100 * 2.55);
let newBlue = data.b - (distanceFromCenter * 100 * 2.55);
let newAlpha = 1 - distanceFromCenter;
if (brightness > 0) {
newAlpha = Math.max(0, brightness - distanceFromCenter);
}
this.addColorStop(distanceFromCenter, rgba(~~newRed, ~~newGreen, ~~newBlue, newAlpha));
}
} else {
this.addColorStop(brightness, color1);
}
this.addColorStop(1, color2);
}
Another thing I don't quite understand is the logic behind useSmootherLights.
The code seems to degrade the light too fast. And you need to set the radius bigger if you have this option on.
I wrote another version below and it seems to have similar effect and correct the radius problem.
JavaScript: CanvasGradient.prototype.addTransparentColorStops = function (brightness, color1, color2) {
if (brightness) {
if (!useSmootherLights) {
var alpha = Math.floor(brightness * 100 * 2.55).toString(16);
if (alpha.length < 2) {
alpha = "0" + alpha;
}
this.addColorStop(0, '#FFFFFF' + alpha);
}
}
if (useSmootherLights) {
let data = hexToRgb(color1);
let data2 = hexToRgb(color2);
let newAlpha = brightness>0?(1-brightness):1;
this.addColorStop(0, rgba(data.r,data.g,data.b,data.a/255*newAlpha));
this.addColorStop(1, rgba(data2.r,data2.g,data2.b,data2.a/255*newAlpha));
} else {
this.addColorStop(brightness, color1);
this.addColorStop(1, color2);
}
}