fix: added pixel ratio to shape drawers and fixed particle stroke width

tsparticles · Jul 15, 2020 · 2245dd0 · 2245dd0
1 parent e977016
commit 2245dd0
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/core/main/src/Core/Interfaces/IParticle.ts b/core/main/src/Core/Interfaces/IParticle.ts
@@ -35,6 +35,7 @@ export interface IParticle {
     readonly shapeData?: IShapeValues;
     readonly size: IParticleSizeAnimation;
     readonly stroke: IStroke;
+    readonly strokeWidth: number;
     readonly strokeColor: IHsl | undefined;
     readonly velocity: IVelocity;
     readonly linksDistance?: number;

diff --git a/core/main/src/Core/Particle.ts b/core/main/src/Core/Particle.ts
@@ -53,6 +53,7 @@ export class Particle implements IParticle {
     public readonly position: ICoordinates;
     public readonly offset: ICoordinates;
     public readonly color: IHsl | undefined;
+    public readonly strokeWidth: number;
     public readonly strokeColor: IHsl | undefined;
     public readonly shadowColor: IRgb | undefined;
     public readonly opacity: IParticleOpacityAnimation;
@@ -300,6 +301,8 @@ export class Particle implements IParticle {
                 ? Utils.itemFromArray(this.particlesOptions.stroke)
                 : this.particlesOptions.stroke;
 
+        this.strokeWidth = this.stroke.width * container.retina.pixelRatio;
+
         /* strokeColor */
         this.strokeColor = ColorUtils.colorToHsl(this.stroke.color);
 

diff --git a/core/main/src/Types/ShapeDrawerFunctions.ts b/core/main/src/Types/ShapeDrawerFunctions.ts
@@ -6,7 +6,8 @@ export type ShapeDrawerDrawFunction = (
     particle: IParticle,
     radius: number,
     opacity: number,
-    delta: number
+    delta: number,
+    pixelRatio: number
 ) => void;
 
 export type ShapeDrawerInitFunction = (container: Container) => Promise<void>;
@@ -16,7 +17,8 @@ export type ShapeDrawerAfterEffectFunction = (
     particle: IParticle,
     radius: number,
     opacity: number,
-    delta: number
+    delta: number,
+    pixelRatio: number
 ) => void;
 
 export type ShapeDrawerDestroyFunction = (container: Container) => void;
diff --git a/core/main/src/Utils/CanvasUtils.ts b/core/main/src/Utils/CanvasUtils.ts
@@ -250,7 +250,7 @@ export class CanvasUtils {
 
         const stroke = particle.stroke;
 
-        context.lineWidth = stroke.width;
+        context.lineWidth = particle.strokeWidth;
         context.strokeStyle = strokeColorValue;
 
         if (particle.close) {
@@ -302,7 +302,7 @@ export class CanvasUtils {
             return;
         }
 
-        drawer.draw(context, particle, radius, opacity, delta.value);
+        drawer.draw(context, particle, radius, opacity, delta.value, container.retina.pixelRatio);
     }
 
     public static drawShapeAfterEffect(
@@ -323,7 +323,7 @@ export class CanvasUtils {
             return;
         }
 
-        drawer.afterEffect(context, particle, radius, opacity, delta.value);
+        drawer.afterEffect(context, particle, radius, opacity, delta.value, container.retina.pixelRatio);
     }
 
     public static drawPlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, delta: IDelta): void {