CODEWITHSUNDEEP
javascriptjqueryhtml5-canvas
SasukeRinnegan
SasukeRinnegan

Reputation: 129

How to draw images on circles

I've drawn two circles on the canvas (one with a velocity and one with some controls) and I've been trying to draw an image on each of them, but I have no clue how to do this. I've uploaded the images. Anyone know how? Also, does someone know why my velocity x keys for the red circle aren't working? Code: http://jsbin.com/vawitiziro/4/edit

Upvotes: 2

Views: 84

Answers (1)

Furqan Zafar
Furqan Zafar

Reputation: 1481

Here is the updated jsbin: http://jsbin.com/tibuxezaca/5/edit

1) use context.clip for drawing images in a custom path:

context.clip();
var w = imageObject.width || 0;
var h = imageObject.height || 0;
context.drawImage(imageObject, circle.x - (w / 2), circle.y - (h / 2));

2) update the x velocity in your update function

circle.x += circle.vx;

Upvotes: 3

Related Questions