I’m experiencing significant image distortion issues when placing a logo on a canvas in my .NET Core project using Konva.js for canvas manipulation. The problem is more pronounced on mobile devices compared to desktop devices.

On Mobile Devices:

The logo image appears slightly distorted when initially placed on the canvas.
After saving the image, the distortion increases significantly, and the content is not displayed properly.

On Desktop Devices:

The logo image appears slightly distorted when initially placed on the canvas.
After saving the image, the content is visible but not as clear as it should be.

Code Snippet:

$(document).ready(function () {
debugger
var x = 0;
var y = 0;
var objectOrgin = “”;
var stepname = $(‘.step-name’).val();
var productId = $(‘.product-id’).val();
var position = $(‘.position’).val();
var searchUrl = stepname == “sponsorlogo” ? ‘/umbraco/surface/DYO/GetCoOrdinatesForSponsorLogoWithObjectOrgin’ : ‘/umbraco/surface/DYO/GetCoOrdinatesForClubLogoWithObjectOrgin’;
$.ajax({
url: searchUrl,
method: ‘GET’,
data: { productId: productId, position: position },
async: false,
success: function (response) {
if (response != null) {
x = response.X;
y = response.Y;
objectOrgin = response.ObjectOrgin.toLowerCase();
}
},
error: function (error) {
console.log(‘Error:’, error);
}
});

var img = document.getElementsByClassName(“hidden-image”)[0];
img.src = item.Image;
var ImgURL = localStorage.getItem(‘MyLogoImage’);
var ResizedImage = new Image();
ResizedImage.src = ImgURL;

ResizedImage.onload = function () {
var width = 749;
var height = 496;
var max_width = 650;
var max_height = 430;
if (ResizedImage.width > ResizedImage.height) {
if (ResizedImage.width > max_width) {
ResizedImage.height = Math.round(ResizedImage.height * (max_width / ResizedImage.width));
ResizedImage.width = max_width;
}
} else {
if (ResizedImage.height > max_height) {
ResizedImage.width = Math.round(ResizedImage.width * (max_height / ResizedImage.height));
ResizedImage.height = max_height;
}
}

var stage = new Konva.Stage({
container: ‘MyLogocontainer’,
width: width,
height: height
});

var layer = new Konva.Layer();
stage.add(layer);
var value = 0.4776785714285714;
var adultDimensions = null;
var selectedIndex = $(‘.selected-index’).val();

if (selectedIndex == “” || selectedIndex == undefined || selectedIndex == “undefined”) {
adultDimensions = extractAdultSizeDimensions(item);
}
else {
var index = parseInt(selectedIndex);
adultDimensions = extractAdultSizeDimensions(clublogoData[index]);
}

var finalAdultHeight = adultDimensions.height * value;
var finalAdultWidth = adultDimensions.width * value;
var adjustedX = x * value;
var adjustedY = y * value;

switch (objectOrgin) {
case ‘top’:
adjustedX -= finalAdultWidth / 2;
break;
case ‘bottom’:
adjustedX -= finalAdultWidth / 2;
adjustedY -= finalAdultHeight;
break;
case ‘left’:
adjustedY -= finalAdultHeight / 2;
break;
case ‘right’:
adjustedX -= finalAdultWidth;
adjustedY -= finalAdultHeight / 2;
break;
case ‘center’:
adjustedX -= finalAdultWidth / 2;
adjustedY -= finalAdultHeight / 2;
break;
default:
adjustedX -= finalAdultWidth / 2;
adjustedY -= finalAdultHeight / 2;
break;
}

var darthVaderImg = new Konva.Image({
image: ResizedImage,
x: adjustedX,
y: adjustedY,
width: finalAdultWidth,
height: finalAdultHeight
});

layer.add(darthVaderImg);
layer.draw();

function moveLogo(dx, dy) {
var scale = stage.scaleX();
adjustedX += dx * scale;
adjustedY += dy * scale;
darthVaderImg.setAttrs({
x: adjustedX,
y: adjustedY
});
layer.draw();
}

var rSaveButton = document.getElementById(‘rremoveallanchor’);
if (rSaveButton != undefined) {
document.getElementById(‘rremoveallanchor’).addEventListener(‘click’, function () {
saveResizedLogo();
});
}

var rmoveUpBtn = document.getElementById(‘rmoveUpBtn’);
if (rmoveUpBtn) {
document.getElementById(‘rmoveUpBtn’).addEventListener(‘click’, function () {
moveLogo(0, -10);
});
}

var rmoveDownBtn = document.getElementById(‘rmoveDownBtn’);
if (rmoveDownBtn) {
document.getElementById(‘rmoveDownBtn’).addEventListener(‘click’, function () {
moveLogo(0, 10);
});
}

var rmoveLeftBtn = document.getElementById(‘rmoveLeftBtn’);
if (rmoveLeftBtn) {
document.getElementById(‘rmoveLeftBtn’).addEventListener(‘click’, function () {
moveLogo(-10, 0);
});
}

var rmoveRightBtn = document.getElementById(‘rmoveRightBtn’);
if (rmoveRightBtn) {
document.getElementById(‘rmoveRightBtn’).addEventListener(‘click’, function () {
moveLogo(10, 0);
});
}

function saveResizedLogo() {
debugger
var stage = document.querySelectorAll(‘canvas’);
var NewLogoImage = stage[1].toDataURL();
localStorage.setItem(“MyResizedLogo”, NewLogoImage);
}

var saveButton = document.getElementById(‘removeallanchor’);
if (saveButton != undefined) {
document.getElementById(‘removeallanchor’).addEventListener(‘click’, function () {
saveResizedLogo();
});
}

var moveUpBtn = document.getElementById(‘moveUpBtn’);
if (moveUpBtn) {
document.getElementById(‘moveUpBtn’).addEventListener(‘click’, function () {
moveLogo(0, -10);
});
}

var moveDownBtn = document.getElementById(‘moveDownBtn’);
if (moveDownBtn) {
document.getElementById(‘moveDownBtn’).addEventListener(‘click’, function () {
moveLogo(0, 10);
});
}

var moveLeftBtn = document.getElementById(‘moveLeftBtn’);
if (moveLeftBtn) {
document.getElementById(‘moveLeftBtn’).addEventListener(‘click’, function () {
moveLogo(-10, 0);
});
}

var moveRightBtn = document.getElementById(‘moveRightBtn’);
if (moveRightBtn) {
document.getElementById(‘moveRightBtn’).addEventListener(‘click’, function () {
moveLogo(10, 0);
});
}

function fitStageIntoParentContainer() {
var container = document.querySelector(‘#CcanvasWrapper’);
var containerWidth = container.offsetWidth;
var scale = containerWidth / width;
stage.width(width * scale);
stage.height(height * scale);
stage.scale({ x: scale, y: scale });
stage.draw();
}
fitStageIntoParentContainer();
window.addEventListener(‘resize’, fitStageIntoParentContainer);
}
});

I have tried the above and all related suggestions, but none of them worked for me. I want the image to be added to the canvas in any size on any device and displayed perfectly after saving, meaning it should merge seamlessly into the canvas. Additionally, on desktop devices, the image should display perfectly, and when uploaded from any device, it should be shown perfectly on any other device.