how to add css ROTATEX() and ROTATEY() to image in canvas

Question

i am trying to make a simple canvas game in jquery,

basically, i have an infinite loop that constantly draws the player and background:

loop = () => {
    $('#player').css("transform", "rotateX("+xr+"deg) rotateY("+yr+"deg)");
    ctx.fillStyle = 'gray';
    ctx.fillRect(0,0,400,400);
    ctx.drawImage(player, x, y, 50, 50);
    window.setTimeout(loop, 1);
}

And then i have a switch statement that alters the player's XR and YR when they push the A and D buttons:

$(document).ready(()=>{
    loop();
    $(document).bind('keydown',(e)=>{
        switch(e.keyCode){
          case 65:
              //moving left (altering the xr and yr values)
              break;
          case 87:
              //moving up (altering the y and x values based on SIN and COS and player's XR and YR)
              break;
          etc...
        }
    });
});

i can tell it's detecting the key pushes, because when i run CONSOLE.LOG() in the switch statement, it prints something to the console,

so clearly this is a problem with images drawn to a canvas not keeping their css styling.

if anybody can figure out how to keep an image's css when drawing it to a canvas, or alter an image draw in a canvas's css, that would be great.

and no, i didn't find any answers anywhere else. this question doesn't seem to have been asked yet.

EDIT: xr and yr are XROTATION and YROTATION variables.

You cannot use css to canvas images.There is an alternative: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate — user17517503, May 04 '22 at 21:28

score 0 · Answer 1 · answered May 04 '22 at 21:31

0

apparently, images don't keep their css in canvases, and there is no way to add this. never mind, guess i'll try something else.

answered May 04 '22 at 21:31

https://www.arc.id.au/Canvas3DGraphics.html – Lee Taylor May 04 '22 at 21:38
[WebGL](https://webglfundamentals.org/) is powerful and works directly with the canvas but can be complicated to start with. [FabricJS](http://fabricjs.com/) is pretty easy to pick up, but might be too simple for what you need. I hear good things about [PaperJS](http://paperjs.org/) but have no direct experience with it. – Corey Ogburn May 04 '22 at 22:03

score -1 · Answer 2 · answered May 04 '22 at 22:05

You don't need CSS, you can do everything with the Canvas, you have translate and rotate methods. Here a very basic example:

const ctx = canvas.getContext("2d");
const { width: w, height: h } = canvas;

let x = (w - 50) >> 1, y = (h - 50) >> 1;
let angle = 0;

const Keys = {
  pressed: {},
  handleEvent({type, code}) {
    this.pressed[code] = type === "keydown"
  }
}

document.addEventListener("keydown", Keys);
document.addEventListener("keyup", Keys);

function update() {
  if (Keys.pressed["ArrowLeft"]) {
    --angle;
  }
  if (Keys.pressed["ArrowRight"]) {
    ++angle;
  }
}

function draw() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, w, h);
  ctx.translate(x + 25, y + 25);
  ctx.rotate(angle * Math.PI / 180 );
  ctx.drawImage(player, -25, -25, 50, 50);
  ctx.setTransform(1, 0, 0, 1, 0, 0);
}

let player = new Image();
player.src = "https://1.bp.blogspot.com/-ddkcnhuU07g/Vllq4DNohkI/AAAAAAAACHo/p8d9SZxOy-w/s1600/mship1.png";

requestAnimationFrame(function render() {
  update();
  draw();
  requestAnimationFrame(render);
})

<canvas id="canvas" width="320" height="240"></canvas>

There is (still) no non-affine transforms on the cavas 2d API. rotateX and rotateY both are non-affine — Kaiido, May 04 '22 at 23:23

how to add css ROTATEX() and ROTATEY() to image in canvas

2 Answers2