if (image) {
					const ccrop = completedCrop;
					const scaleX = image.naturalWidth / image.width;
					const scaleY = image.naturalHeight / image.height;
					const ctx = canvas.getContext("2d");
					const pixelRatio = window.devicePixelRatio;
					  const sx = ccrop.x * scaleX;
                      const sy = ccrop.y * scaleY;
                      const sWidth = ccrop.width * scaleX;
                      const sHeight = ccrop.height * scaleY;
					canvas.width = ccrop.width * /*pixelRatio **/ scaleX;
					canvas.height = ccrop.height * /*pixelRatio **/ scaleY;
					// Debugging logs for dimensions and scaling
					console.log('natural dimensions', image.naturalWidth, image.naturalHeight);
					console.log('image dimensions', image.width, image.height);
					console.log('canvas dimensions', canvas.width, canvas.height);
					console.log('Scale X', scaleX, 'Scale Y', scaleY);
					console.log('Pixel Ratio', pixelRatio);
					console.log('Crop dimensions', ccrop.width, ccrop.height);
					if (ctx) {
						ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
						ctx.scale(1.0 / pixelRatio, 1.0 / pixelRatio);
						ctx.imageSmoothingQuality = "high";
						ctx.save();
                      	ctx.drawImage(
							image,
							sx,
							sy,
							sWidth,
							sHeight,
							0,
							0,
							canvas.width,
							canvas.height
						);
						ctx.restore();
					}`