Rotating svg file on html5 canvas

Question

Creating a game and trying to rotate svg file need help implementing

here is constructor

function Paperplane(width, height, xPos, yPos, image) {
this.xPos = xPos;
this.yPos = yPos;
this.speedX = 0;
this.speedY = 0;
this.width = width;
this.height = height;
this.angle = 0;
this.image = new Image();
this.image.src = image;
this.update = function() {
    //   var img = new Image();
    //  img.onload = function() {
    //     ctx.drawImage(img, xPos, yPos, width, height);
    // };
    // image.src = "../paper-droid/assets/images/paperplane.svg";
    ctx = myGameArea.context;
    ctx.drawImage(
        this.image,
        this.xPos,
        this.yPos,
        this.width,
        this.height
    );
}

}

Rotate method that I can't get to work

Paperplane.prototype.drawRotated = function(context, xPos, yPos) {
ctx.save();
ctx.translate(this.xPos + this.width / 2, this.yPos + this.height / 2);
ctx.rotate(this.angle * Math.PI / 180);
ctx.drawImage(this.img, this.x, this.y, this.width, this.height,
                        -this.width / 2, -this.height / 2, this.width, this.height);
ctx.restore();
}

and currently just trying to get left arrow key to call on the rotate method to get it working

// Move
// keyCodes: Right => 39, left => 37, Up => 38, Back => 40, Spacebar => 32
// keydown function that will move plane sprite across game canvas
function move(e) {
// alert(e.keyCode);
if (e.which == 39) {
    plane.speedX = 5;
    // console.log("Move 5 pixels to the right")
}
if (e.which == 37) {
    plane.speedX = -5;
    plane.drawRotated();
    // console.log("Move 5 pixels to the left")
}
if (e.which == 38) {
    plane.speedY = -5;
    // console.log("Move 5 pixels up")
}
if (e.which == 40) {
    plane.speedY = 5;
    // console.log("Move 5 pixels down")
}

if (e.which == 32) {
    plane.shoot();
}

}

document.onkeydown = move;

error that I am getting on console

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)' at Paperplane.drawRotated (game.js:90) at HTMLDocument.move (game.js:107)

You might get better quality by rotating the SVG and then drawImage. — Brad

dougtesting.net dougtesting.net · Accepted Answer · 2018-02-03T21:02:15

Where the variables are declared image is defined like this

this.image = new Image();

But in the drawRotated function you try to use a variable called

this.img

So the problem is image vs img for the variable name. Try using this.image in the draw function.

Rotating svg file on html5 canvas

1 Answers