Low image resolution

[Sandervanmaurik]

I am using this package to load an image on a canvas and to be able to draw on it.
Using the imageUrl property works, but the rendered image is low resolution. I am setting a page of a PDF file in the imageUrl property which is working, and if I use the generated Base64 string in an online viewer, the resolution is high, but in the canvas it is not.
Is there a way to make sure that the text is rendered in high resolution?

I forked the repo to test if I could change the drawImage function, but I am stuck. Nothing that I try is working.

This is how it is rendered. You can see that the text is blurry.

[Sandervanmaurik]

Forked the git repo and changed the _drawImage() function in canvas-whiteboard.component.ts to:

   if (arguments.length === 2) {
     x = y = 0;
     width = context.canvas.style.width;
     height = context.canvas.style.height;
   }
   offsetX = typeof offsetX === 'number' ? offsetX : 1;
   offsetY = typeof offsetY === 'number' ? offsetY : 1;

   if (offsetX < 0) {
     offsetX = 0;
   }
   if (offsetY < 0) {
     offsetY = 0;
   }
   if (offsetX > 1) {
     offsetX = 1;
   }
   if (offsetY > 1) {
     offsetY = 1;
   }

   const imageWidth = image.width;
   const imageHeight = image.height;
   console.log("ImageWidth: " + imageWidth);
   console.log("ImageHeight: " + imageHeight);
   const radius = Math.min(width / imageWidth, height / imageHeight);
   console.log("Radius: " + radius);

   let newWidth = imageWidth * radius;
   let newHeight = imageHeight * radius;
   let finalDrawX: any;
   let finalDrawY: any;
   let finalDrawWidth: any;
   let finalDrawHeight: any;
   let aspectRatio = 1;
   if (newWidth < width) {
     aspectRatio = width / newWidth;
   }
   if (Math.abs(aspectRatio - 1) < 1e-14 && newHeight < height) {
     aspectRatio = height / newHeight;
   }
   newWidth *= aspectRatio;
   newHeight *= aspectRatio;
   finalDrawHeight = imageHeight;
   finalDrawWidth = imageWidth;

   finalDrawX = (imageWidth - finalDrawWidth) * offsetX;
   finalDrawY = (imageHeight - finalDrawHeight) * offsetY;

   // make sure the source rectangle is valid
   if (finalDrawX < 0) {
     finalDrawX = 0;
   }
   if (finalDrawY < 0) {
     finalDrawY = 0;
   }
   if (finalDrawWidth > imageWidth) {
     finalDrawWidth = imageWidth;
   }
   if (finalDrawHeight > imageHeight) {
     finalDrawHeight = imageHeight;
   }
   context.imageSmoothingQuality = "high";
   
   context.canvas.width = finalDrawWidth;
   context.canvas.height = finalDrawHeight;
   this._incompleteShapesCanvas.nativeElement.width = finalDrawWidth;
   this._incompleteShapesCanvas.nativeElement.height = finalDrawHeight;
   context.drawImage(image, finalDrawX, finalDrawY, finalDrawWidth , finalDrawHeight, x, y, finalDrawWidth, finalDrawHeight);
 }
`