CODEWITHSUNDEEP
javascriptcanvas
Ilja
Ilja

Reputation: 46527

Changing shape of Confetti canvas effect

I am looking to implement a Confetti effect for a landing page of the website and have stumbled upon perfect starter here: https://codepen.io/linrock/pen/Amdhr However, I need to edit shape of confetti to be small rectangles as opposed to circles:

I have tried changing:

context.arc(x,y,r,0,PI_2,false)

to 

context.rect(10,10,10,20)

this results in one confetti on a page of shape that I want all of them to be, but as you will see gets rid of whole Confetti effect. I'm pretty sure that I need to edit drawCircle to achieve what I want.

Upvotes: 0

Views: 765

Answers (1)

Emil S. Jørgensen
Emil S. Jørgensen

Reputation: 6366

Just change:

drawCircle = (x,y,r,style) ->
  context.beginPath()
  context.arc(x,y,r,0,PI_2,false)
  context.fillStyle = style
  context.fill()

To

drawCircle = (x,y,r,style) ->
  context.fillStyle = style
  context.fillRect(x,y,r,r)
  context.fill()

EDIT 1

Please note that this is CoffeeScript, not JavaScript.

Upvotes: 1

Related Questions