fix: retina canvas support

src/Primal.tsx

@@ -82,7 +82,7 @@ const PrimalStep = ({
     )
 }
 
-export const Primale = ({ input }: { input: ProblemInput }) => {
+export const Primal = ({ input }: { input: ProblemInput }) => {
     // const steps: Step[] = [{ B: input.B }]
 
     const problemOutput = computePrimalSimplexSteps({
@@ -141,16 +141,16 @@ const PrimalCanvas = ({
             return
         }
 
-        $canvas.width = $canvas.offsetWidth
+        $canvas.width = $canvas.offsetWidth * window.devicePixelRatio
-        $canvas.height = $canvas.offsetHeight
+        $canvas.height = $canvas.offsetHeight * window.devicePixelRatio
 
         const g = $canvas.getContext('2d')
         if (!g) {
             throw new Error('Could not get 2d context')
         }
 
-        const width = $canvas.width
+        const width = $canvas.offsetWidth
-        const height = $canvas.height
+        const height = $canvas.offsetHeight
 
         g.clearRect(0, 0, width, height)
         g.strokeStyle = '#333'
@@ -163,6 +163,8 @@ const PrimalCanvas = ({
         g.textAlign = 'center'
         g.textBaseline = 'middle'
 
+        g.scale(window.devicePixelRatio, window.devicePixelRatio)
+
         const [c1, c2] = c.getData()
         const cLen = Math.sqrt(c1.toNumber() ** 2 + c2.toNumber() ** 2)
 
@@ -202,6 +204,8 @@ const PrimalCanvas = ({
         // g.textBaseline = 'middle'
         // g.fillText(`A = ${A}`, width / 2, height / 2)
 
+        g.save()
+        {
             g.translate(width / 2, height / 2)
             g.scale(width / 2, -width / 2)
             g.scale(1 / 10, 1 / 10)
@@ -209,7 +213,7 @@ const PrimalCanvas = ({
             // draw grid
 
             g.strokeStyle = '#ddd'
-        g.lineWidth = 20 / g.canvas.width
+            g.lineWidth = 20 / width
             for (let i = -10; i <= 10; i++) {
                 strokeInfiniteLine(g, i, 0, Math.PI / 2)
             }
@@ -218,7 +222,7 @@ const PrimalCanvas = ({
             }
 
             g.strokeStyle = '#333'
-        g.lineWidth = 40 / g.canvas.width
+            g.lineWidth = 40 / width
             drawSimpleArrow(g, 0, 0, 9.8, 0, 0.35, '#444')
             drawSimpleArrow(g, 0, 0, 0, 9.8, 0.35, '#444')
 
@@ -250,7 +254,7 @@ const PrimalCanvas = ({
             if (x) {
                 const [x1, x2] = x.getData()
 
-            g.lineWidth = 50 / g.canvas.width
+                g.lineWidth = 50 / width
                 drawSimpleArrow(
                     g,
                     x1.toNumber(),
@@ -266,7 +270,7 @@ const PrimalCanvas = ({
                     const [xi1, xi2] = xi.getData()
                     const xiLen = Math.sqrt(xi1.toNumber() ** 2 + xi2.toNumber() ** 2)
 
-                g.lineWidth = 50 / g.canvas.width
+                    g.lineWidth = 50 / width
                     drawSimpleArrow(
                         g,
                         x1.toNumber(),
@@ -281,8 +285,8 @@ const PrimalCanvas = ({
                 g.fillStyle = '#d44'
                 fillDot(g, x1.toNumber(), x2.toNumber(), 0.2)
             }
-
+        }
-        g.resetTransform()
+        g.restore()
 
         // draw c vector
 

src/lib-v2/canvas/index.ts

@@ -69,7 +69,7 @@ export function drawSemiplane(
 
     // Draw the line
     g.strokeStyle = lineColor
-    g.lineWidth = (lineWidth * 10) / g.canvas.width
+    g.lineWidth = (lineWidth * 10) / (g.canvas.width / window.devicePixelRatio)
 
     g.beginPath()
     if (a2 === 0) {

src/main.tsx

@@ -2,7 +2,7 @@ import { render } from 'preact'
 import { useState } from 'preact/hooks'
 import { parseSafeProblemInput } from './parser-problem'
 import { DisplayProblemInput } from './DisplayProblemInput'
-import { Primale } from './Primale'
+import { Primal } from './Primal'
 
 import exampleProblems from './example-problems.json'
 
@@ -43,6 +43,7 @@ const App = () => {
         'ricerca-operativa.currentProblemName',
         'Pintel'
     )
+
     const [savedProblems, setSavedProblems] = useLocalStorage<{ name: string; source: string }[]>(
         'ricerca-operativa.savedProblems',
         exampleProblems
@@ -137,7 +138,7 @@ const App = () => {
                 </p>
             )}
 
-            {'result' in problemValuesResult && <Primale input={problemValuesResult.result} />}
+            {'result' in problemValuesResult && <Primal input={problemValuesResult.result} />}
         </>
     )
 }