diff --git a/index.html b/index.html
index ce45a53..acf1dbc 100644
--- a/index.html
+++ b/index.html
@@ -873,20 +873,6 @@
image.ctx = ctx;
ctx.save();
- // Invert background if needed
- if (settings["backgroundColor"] == "transparent") {
- ctx.fillStyle = "rgba(0,0,0,0.0)";
- ctx.globalCompositeOperation = 'copy';
- } else {
- if (settings["invertColors"]){
- settings["backgroundColor"] == "white" ? ctx.fillStyle = "black" : ctx.fillStyle = "white";
- } else {
- ctx.fillStyle = settings["backgroundColor"];
- }
- ctx.globalCompositeOperation = 'source-over';
- }
- ctx.fillRect(0, 0, canvas.width, canvas.height);
-
const flipHorizontal = settings["flipHorizontally"] ? -1 : 1;
const flipVertical = settings["flipVertically"] ? -1 : 1;
@@ -928,6 +914,21 @@
ctx.translate(0, canvas.height);
ctx.rotate(-Math.PI*0.5);
}
+
+ // Draw background
+ if (settings["backgroundColor"] == "transparent") {
+ ctx.fillStyle = "rgba(0,0,0,0.0)";
+ ctx.globalCompositeOperation = 'copy';
+ } else {
+ if (settings["invertColors"]){
+ settings["backgroundColor"] == "white" ? ctx.fillStyle = "black" : ctx.fillStyle = "white";
+ } else {
+ ctx.fillStyle = settings["backgroundColor"];
+ }
+ ctx.globalCompositeOperation = 'source-over';
+ }
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
// Offset used for centering the image when requested
var offset_x = 0;
var offset_y = 0;
@@ -945,16 +946,10 @@
// offset_y_dir = -1;
// }
- console.log('scale: ', settings['scale']);
switch(settings["scale"]){
case 1: // Original
if(settings["centerHorizontally"]){ offset_x = Math.round((canvas.width - imgW) / 2); }
if(settings["centerVertically"]){ offset_y = Math.round((canvas.height - imgH) / 2); }
- // offset_x *= offset_x_dir;
- // offset_y *= offset_y_dir;
- console.log('original');
- console.log(`ctx.drawImage(img, 0, 0, ${imgW}, ${imgH},
- ${offset_x}, ${offset_y}, ${imgW}, ${imgH})`);
ctx.drawImage(img, 0, 0, imgW, imgH,
offset_x, offset_y, imgW, imgH);
break;