Canvas drawing


#1

I'm basically trying to get those individual bubbles to be an SVG. However, it only draws one bubble? I know I have to update the coordinates of drawImage in the codepen, but I'm not sure if what I want is even possible?


#2

I fixed it by replacing .stroke/fill/etc...all those functions, with just drawImage.

I have one final question and I'll be done this treatment. I need to randomly make the bubbles from one of two images, and make it stick. It seems like it's not working correctly. It should be a pretty even mix but that doesn't seem to be the case. Seems to do bunches of it at a time.


#3

Think I got it. I moved my new Image() call to inside the foreach.


#4

Congratulations on a very nice effect!


#5

Thank you, but I based it off of https://codepen.io/nlyttle/pen/wmEqjv
Granted, I changed a lot in this. Made it more "reusable" for multiple treatments on something I'm working on...changed the speed of the animation + amount of "bubbles"...and obviously changed the colored dots to an SVG drawing. But 80% of the hard work was already done for me :slight_smile: .


#6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.