assets/js/frame.js in appscms-tools-theme-2.2.5 vs assets/js/frame.js in appscms-tools-theme-2.2.6

@@ -50,52 +50,61 @@
 }
 form.addEventListener('submit', (e) => {
   e.preventDefault()
   drawImage()
 })
-const drawInputImage = (ctx, item, indexValue, canvas, image) => {
+const drawInputImage = (ctx, item, indexValue) => {
   return new Promise((resolve, reject) => {
     let image = document.createElement('img')
     image.src = files[indexValue]
     image.onload = () => {
+      ctx.save()
       image.width = Number(item.width)
       image.height = Number(item.height)
       if (item.filter) {
         ctx.filter = item.filter
       }
+      if (item.rotate) {
+        ctx.rotate((item.rotate * Math.PI) / 180)
+      }
+
       ctx.drawImage(
         image,
         Number(item.x),
         Number(item.y),
         image.width,
         image.height
       )
-      if (item.rotate) {
-        drawRotated(item.rotate, ctx, canvas, image, item)
+      if (item.translate) {
+        ctx.translate(item.translate.x, item.translate.y)
       }
+      if (item.skew) {
+        ctx.setTransform(1, item.skew.x, item.skew.y, 1, 0, 0)
+      }
+      ctx.restore()
       resolve()
     }
   })
 }
 
 const drawRotated = (degrees, ctx, canvas, image, item) => {
-  console.log(image)
-  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  // console.log(image)
+  // ctx.clearRect(0, 0, canvas.width, canvas.height)
 
   // save the unrotatedctx of the canvas so we can restore it later
   // the alternative is to untranslate & unrotate after drawing
   ctx.save()
 
   // move to the center of the canvas
-  ctx.translate(item.x, item.y)
+  // ctx.translate(item.x, item.y)
 
   // rotate the canvas to the specified degrees
-  ctx.rotate((degrees * Math.PI) / 180)
+  ctx.rotate((50 * Math.PI) / 180)
 
   // draw the image
   // since thectx is rotated, the image will be rotated also
-  ctx.drawImage(image, -image.width / 2, -image.width / 2)
+  // ctx.drawImage(image, -image.width / 2, -image.width / 2)
 
   // we’re done with the rotating so restore the unrotatedctx
   ctx.restore()
 }
 const drawImage = () => {
@@ -116,10 +125,10 @@
           })
         }
       })
     ).then(() => {
       ctx.filter = 'none'
-      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+      // ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
       featureData.elements.map((item, indexValue) => {
         if (item.type === 'text') {
           let myFont = new FontFace(item.font, `url(${item.fontPath})`)
           myFont.load().then(function (font) {
             ctx.save()