Enable antialiasing in base-layers.js

[zhaohanfeng]

Hi Viliusle,

Adding the following two lines may help to improve image quality during rendering and export.

        ctx.imageSmoothingEnabled = true;
        ctx.imageSmoothingQuality = "high";

---

File: base-layers.js

in function render_object(ctx, object, is_preview) { ... ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = "high";

        ctx.drawImage(
            object.link_canvas != null ? object.link_canvas : object.link,
            -object.width / 2,
            -object.height / 2,
            object.width,
            object.height
        );

in convert_layer_to_canvas(layer_id, actual_area = false, can_trim) { ...

    //add data
    if (actual_area === true && link.type == "image") {
        //Enable antialiasing
        canvas.getContext("2d").imageSmoothingEnabled = true;
        canvas.getContext("2d").imageSmoothingQuality = "high";
        canvas.getContext("2d").drawImage(link.link, 0, 0);

-Alan

[viliusle]

Hi, we already are doing such things, sometimes it is on (when zoom < 100), sometimes off (when zoom >= 100 or during save).

[Giwayume]

Ultimately when you zoom in in a raster photo editor you want to see the individual pixels so you can edit them clearly. Smoothing is only enabled if the view is zoomed out, where multiple perceptual pixels from your image are rendered to a single pixel on screen.

Canvas imageSmoothingEnabled has some nasty effects on the image, no matter the quality setting. It blurs surrounding pixels together even when they are perfectly pixel aligned, causing loss of detail. It is a pretty bad algorithm for anything that's not in motion.

It could be added as an option as it may be useful in some cases such as layer rotation, but it shouldn't be the default.