Cannot Rotate Canvas

[SteffTek]

Expected Behaviour

1. Rotating Canvas

Actual Behaviour

1. Isn't rotating Canvas

Steps To Reproduce

1. Tried multiple Tutorials on regular canvas. E.g. https://stackoverflow.com/questions/8517879/how-to-rotate-the-existing-content-of-html5-canvas

Any Relevant Code Snippets

    let width = original.width;
    let height = original.height;

    var context = original.getContext('2d');

    var angle = degrees * Math.PI / 180;

    context.translate(width / 2, height / 2);
    context.rotate(angle);
    context.drawImage(original, -width / 2, -height / 2, width, height);
    context.fillRect(10,10,100,100);
    context.rotate(-angle);
    context.translate(-width, -height);

    return original;

Platform

OS:WIN10
Node Version:15x
NPM Version:6.14
PureImage Version:Latest

[joshmarinacci]

Okay, I think I see the issue. Transforms are correctly affecting drawing lines, but not drawing images. I'll work on a fix.

[joshmarinacci]

I've just pushed back a fix. Could you try it from source and see if it works for you?

[SteffTek]

Thanks for your response. I tried to test it, but somehow I cannot import pureimage like it used to (like in the readme.md).

> node test.js

node:internal/modules/cjs/loader:1125
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\A48246746\Desktop\zt\node-pureimage-master\src\index.js
require() of ES modules is not supported.
require() of C:\Users\A48246746\Desktop\zt\node-pureimage-master\src\index.js from C:\Users\A48246746\Desktop\zt\Planet.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\A48246746\Desktop\zt\node-pureimage-master\package.json.

    at new NodeError (node:internal/errors:278:15)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1125:13)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (C:\Users\A48246746\Desktop\zt\Planet.js:3:16)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32) {
  code: 'ERR_REQUIRE_ESM'
}

[joshmarinacci]

ah, okay. I forgot that I changed everything to use JS modules instead of the older require syntax. That means you'll need to use a pre-built version. Could you paste in your test.js so I can test it?

[SteffTek]

This is my complete Rotation Function. original is a pureimage object. Should work with your standard integration.

function rotate(original, degrees) {

    let width = original.width;
    let height = original.height;

    var context = original.getContext('2d');

    var angle = degrees * Math.PI / 180;

    context.translate(width / 2, height / 2);
    context.rotate(angle);
    context.drawImage(original, -width / 2, -height / 2, width, height);
    context.fillRect(10,10,100,100);
    context.rotate(-angle);
    context.translate(-width, -height);

    return original;
}

[joshmarinacci]

I've published a new pre-built version. Could you update to v0.3.1 and try again?

[SteffTek]

Sadly, the same kind of error with the import. How do I import it now?

[joshmarinacci]

are you importing it like this: const pureimage = require('pureimage')

[joshmarinacci]

I think I recreated it. update to 0.3.2 and try again.

[SteffTek]

It works!! Thanks ^^

This is my final code:

function rotate(original, degrees) {

    let width = original.width;
    let height = original.height;

    var newImage = PImage.make(width, height);
    var context = newImage.getContext('2d');

    var angle = degrees * Math.PI / 180;

    context.clearRect(0,0,width,height);
    context.translate(width / 2, height / 2);
    context.rotate(angle);
    context.drawImage(original, -width / 2, -height / 2, width, height);
    context.rotate(-angle);
    context.translate(-width, -height);

    return newImage;
}

[joshmarinacci]

great. I'm so glad.