Trying to put an image inside an arc on canvas - javascript

Question

Hey I would really like someone to help me out here. So, basically I am just tryng out my canvas skills. I want to make a shooting game where I shoot on a bunch of emojies tavelling on different y-axis points, different heights, and sliding on the x axis with different velocities.

I have a few emogi images I renamed them in enumrable. Where I struggles is displaying does images inside an arc. Also, I want the entire image to display in a 10 by 10/etc and not just to overflow it.

I would really like someone to help me out here, thanks.

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var height = canvas.height = window.innerHeight;
var width = canvas.width = window.innerWidth;
function random(min, max) {
    var num = Math.floor(Math.random() * (max - min)) + min;
    if (num === 0) {
       return 2;
    }
    return num;
}
function Target(x, y, velX, radius, image) {
    this.x = x;
    this.y = y;
    this.velX = velX;
    //this.velY = velY;
    this.radius = radius;
    this.image = image;
}
Target.prototype.update = function () {
    if (this.x + this.radius >= width) {
        this.velX = -this.velX;
    }
    if (this.x + this.radius <= width) {
        this.velX = -this.velX;
    }
    /*if (this.y + this.radius >= height) {
        this.velY = -this.velY;
    }
    if (this.y + this.radius >= 0) {
        this.velY = -this.velY;
    }*/
    this.x += this.velX;
    //this.y += this.velY; 
};
Target.prototype.draw = function () {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, true);
    ctx.fillStyle = ctx.createPattern(this.image, 'no-repeat');
    ctx.fill();


    this.update();
};


//var target1 = new Target(30, 40, 20, 20);
function loop() {
    ctx.fillRect(0, 0, width, height);
    var targets = [];
    var img = new Image();
    while (targets.length < 25) {
        img.src = './images/emogi' + random(1, 6) + '.jpg';
        img.repeat = 'no-repeat';
        img.maxHeight = 10;
        img.maxWidth = 10;
        var target = new Target(
            random(100, 500),
            random(100, 500),
            random(10, 30),
            20,
            img
        );
        targets.push(target);
    }
    for (var i =0; i< targets.length; i++) {
        target[i].draw();
        target[i].update();
    }
    requestAnimationFrame(loop);

}
loop();

https://stackoverflow.com/questions/29190226/fill-html5-arc-with-a-picture-html5-canvas is what you want — An0num0us, Nov 05 '17 at 13:25
I did what they said there inside the code but for some reason it didn't work — Elad Goldenberg, Nov 05 '17 at 13:28

score 0 · Answer 1 · answered Nov 06 '17 at 09:39

Your problem is that you don’t see the image. This happens because you start loading image and then immediately draw it. When you draw, there’s no image. It hasn’t loaded yet!

To fix it, you have to preload all images

Example

Let images = {
    “emoji”: {}
};

function loadImages() {
    return new Promise((resolve, reject) => {
        // initiate loading
        // wait for all to load
        // resolve promise
    });
}

loadImages.then(startGame);

You might find this question helpful Javascript/HTML5 using image to fill canvas

I managed to draw the images without the promise, now I can’t make them to move up the x axis — Elad Goldenberg, Nov 06 '17 at 09:46

Trying to put an image inside an arc on canvas - javascript

1 Answers1