CODEWITHSUNDEEP
javascriptphphtmlcsscanvas
Jacob Morgans
Jacob Morgans

Reputation: 41

How do i place an image over circle object?

Here is my circle variable I'm using for a canvas game. How would I go about placing an image over it whilst maintaining its movement across the canvas?

var img = new Image();
img.src = "img.png";   

var ball = {
    radius: 0
   ,position: { x: 0, y: 0 }
   ,velocity: { x: 0, y: 0 }
   ,acceleration: 0
   ,draw: 
     function() {
        context.fillStyle = "yellow";
        context.beginPath();
        context.arc(this.position.x, this.position.y, this.radius, 0, 2 * Math.PI); 
        context.fill();
      }  
};

Upvotes: 0

Views: 55

Answers (1)

Blindman67
Blindman67

Reputation: 54069

The most basic way is to create a clip

   ,draw () {
        context.beginPath();
        context.arc(this.position.x, this.position.y, this.radius, 0, 2 * Math.PI); 
        context.save(); // save current state
        context.clip();
        context.drawImage(myImage,this.position.x-this.radius,this.position.y-this.radius,this.radius * 2,this.radius * 2);
        context.restore(); // removes the clip.
      }

But this is a slow way to do it. Best is to use the globalCompositeOperation to create a mask so that you mask the image. Also you should draw the masked image on an offscreen canvas so you only have to do the masking once, then just draw the offscreen canvas..

Upvotes: 1

Related Questions