CODEWITHSUNDEEP
javascriptnode.jscanvashtml5-canvaselectron
Mr.DeleteMyMessages
Mr.DeleteMyMessages

Reputation: 381

JavaScript context translate doesnt work in electron

I am using ctx.translate(x, y) to move Camera in canvas game. But for some reason, that doesn't work.

This is what I am using:

setCameraPos: function(x, y) {
        //ctx.save()
        ctx.translate(x, y)
        ctx.setTransform(1, 0, 0, 1, 0, 0)
        //ctx.restore()
}

It doesn't work at all. It does not change position of camera. Any errors? No errors at all. I am using Electron 3.0.3 Beta.

I accept any libraries.

const canvas = document.getElementById('main')
const ctx = canvas.getContext('2d')


ctx.fillStyle = 'red'
ctx.fillRect(0, 0, 30, 30)
// This doesn't work | VVV
ctx.translate(20, 20)
ctx.setTransform(1, 0, 0, 1, 0, 0)
#main {
  background-color: black;
}
<canvas id="main">

</canvas>

Upvotes: 0

Views: 893

Answers (1)

Kaiido
Kaiido

Reputation: 137084

From what you gave, the translate operation won't work anywhere, not just in Electron.

ctx.setTransform() method sets the transformation matrix to absolute values, the current matrix is discarded and the passed values are the ones to which your matrix will get set.
1, 0, 0, 1, 0, 0 are the values of the native matrix transform (i.e untransformed).

So calling ctx.setTransform(1, 0, 0, 1, 0, 0) will reset your tranform matrix to its default and make all calls to relative translate(), rotate() or transform() useless.

These methods are meant to be relative because they add up to the current matrix values. For instance,

ctx.translate(10, 10);
// here next drawing will be offset by 10px in both x and y direction
ctx.translate(40, -10);
// this adds up to the current 10, 10, so we are now offset by 30, 0

If you want your translate to work, don't call setTransform here, or even replace it with setTransform(1, 0, 0, 1, 20, 20)

Also, in your snippet, you are setting the transformation matrix after you did draw. The transformations will get applied only on next drawings, not on previous ones.

Now, you might be in an animation loop, and need your matrix to get reset at every loop. In this case, call ctx.setTransform(1,0,0,1,0,0) either at the beginning of your drawing loop, either as the last op, and call translate() before drawing.

const canvas = document.getElementById('main');
const ctx = canvas.getContext('2d');
let x = 0;
ctx.fillStyle = 'red'
anim();

function draw() {
  // reset the matrix so we can clear everything
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  //set the transform before drawing
  ctx.translate(x - 30, 20)
  //which is actually the same as 
  //ctx.setTransform(1, 0, 0, 1, x, 20);
  ctx.fillRect(0, 0, 30, 30);
}
function anim() {
  x = (x + 2) % (canvas.width + 60);
  draw();
  requestAnimationFrame(anim);
}
  
#main {
  background-color: black;
}
<canvas id="main"></canvas>

Upvotes: 1

Related Questions