Canvas has a blurred rendering

[Digiperf]

Hello Rafael @radykal

The canvas looks blurred, especially on text layers.

I tried switching back to the parameters, but none of my changes were successful.

Here's the preview url: https://staging.greetandgreen.com/customize/new/480

When I go to step 2, the layers are transformed into HTML by transposing the layer parameters into CSS attributes, and everything comes out fine :

Thanks

[Digiperf]

@radykal do you have some news for me please ?

[Digiperf]

@radykal it's very urgent

can you help me please ?

[Digiperf]

FYI, I tried with the most basic config :

const $yourDesigner = $('#clothing-designer'),
                    fonts = fontsList,
                    pluginOpts = {
                        // mainBarModules: ['manage-layers', 'text-layers', 'images', 'designs', 'names-numbers'],
                        langJSON: '{{ asset('fpd/lang/en_fpd.json') }}',
                        templatesDirectory: '{{ asset('fpd/html') }}/',
                        productsJSON: {!! $productJSON !!},
                        //see JSON folder for products sorted in categories
                        //designsJSON: 'json/designs.json', see JSON folder for designs sorted in categories
                        // stageWidth: 1000 * scaleFactor,
                        // stageHeight: 1000 * scaleFactor,
                        // smartGuides: true,
                        // fonts: fonts,
                        // cornerControlsStyle: true,
                        // cornerColor: "rgba(53, 106, 97, 1)",
                        // selectedColor: "rgba(53, 106, 97, 1)",
                        // selectionBorderColor : "rgba(53, 106, 97, 1)",
                        // cornerIconColor : "white",
                        // borderColor : "rgba(51, 51, 51, 1)",
                        // borderStyle : "dotted",
                        // borderWidth : 1,
                        // backgroundColor : "rgba(242, 214, 200, 0.5)",
                        // padding : 0,
                        // borderDashArray : [6, 5],
                        // customTextParameters: {
                        //     colors: true,
                        //     removable: true,
                        //     resizable: true,
                        //     draggable: true,
                        //     rotatable: true,
                        //     autoCenter: true,
                        //     boundingBox: "Base",
                        //     borderColor: "#000",
                        // },
                        // customImageParameters: {
                        //     draggable: false,
                        //     removable: true,
                        //     resizable: true,
                        //     rotatable: true,
                        //     colors: '#000',
                        //     autoCenter: true,
                        //     advancedEditing: true,
                        //     filter: true,
                        //     boundingBox: "Base",
                        // },
                        // autoSelect: true,
                        // elementParameters: {
                        //     autoSelect: true
                        // },
                        // actions: {
                        //     'top': ['undo', 'redo', 'zoom', 'save', 'animation', 'preview'],
                        //     'right': [],
                        //     'bottom': [],
                        //     'left': []
                        // },
                        // mainOptions: {
                        //     cornerControlsStyle: "Basic"
                        // }
                    };

                window.fancyProductDesigner = new FancyProductDesigner($yourDesigner, pluginOpts);

I have the same blurred rendering

[Digiperf]

Hello @radykal I'm making progress on the diagnosis. When I don't have an image layer, the text is very precise without any blurring.

Here's an example of an image layer that could cause problems:

{
                     "title":"01",
                     "source":"https://staging.greetandgreen.com/storage/elements/01-3_6566b61881ffd.png",
                     "type":"image",
                     "parameters":{
                        "left":0,
                        "top":0,
                        "originX":"left",
                        "originY":"top",
                        "z":-1,
                        "fill":false,
                        "colors":false,
                        "colorLinkGroup":false,
                        "draggable":false,
                        "rotatable":false,
                        "resizable":false,
                        "removable":false,
                        "flipX":false,
                        "flipY":false,
                        "zChangeable":false,
                        "scaleX":0.3295194508,
                        "scaleY":0.3295194508,
                        "uniScalingUnlockable":false,
                        "angle":0,
                        "price":0,
                        "autoCenter":false,
                        "replaceInAllViews":false,
                        "autoSelect":false,
                        "topped":false,
                        "boundingBoxMode":"clipping",
                        "opacity":1,
                        "excludeFromExport":false,
                        "locked":true,
                        "showInColorSelection":false,
                        "boundingBox":false,
                        "fixed":false,
                        "resizeToW":0,
                        "resizeToH":0,
                        "filter":null,
                        "scaleMode":"fit",
                        "minScaleLimit":0.01,
                        "advancedEditing":false,
                        "uploadZone":false,
                        "uploadZoneMovable":false,
                        "uploadZoneRemovable":false
                     }
}

I've tried deleting the options one by one, but to no avail, the rendering is still blurred.

Tested on several FPD products and several images and texts

Thanks for your help

[Digiperf]

@radykal UP

It's very important please 🙏

[Digiperf]

@radykal can you help me on this point please ?? Thanks