Warning! This page is still in the works.


cc.fillStyle = "#000"
cc.beginPath()
cc.moveTo(x,y)
cc.lineTo(x,y)
cc.lineTo(x,y) // minimum of two
cc.closePath()
cc.fill()
  • No arguments. beginPath() begins the path.

    • cc.fillStyle = "#000"
    cc.beginPath()
    cc.moveTo(x,y)
    cc.lineTo(x,y)
    cc.lineTo(x,y) // minimum of two
    cc.closePath()
    cc.fill()
  • moveTo() is the first point of your shape. There is only one of these!

    • cc.fillStyle = "#000"
    cc.beginPath()
    cc.moveTo(x,y)
    cc.lineTo(x,y)
    cc.lineTo(x,y) // minimum of two
    cc.closePath()
    cc.fill()
  • lineTo() is the next point of your shape.
  • You can place as many of these as you need to fill your shape. (There should be atleast two of these)

    • cc.fillStyle = "#000"
    cc.beginPath()
    cc.moveTo(x,y)
    cc.lineTo(x,y)
    cc.lineTo(x,y) // minimum of two
    cc.closePath()
    cc.fill()
  • closePath() fills in the gap between the first and last coordinates given.
  • Is at the end of your shape.

    • cc.fillStyle = "#000"
    cc.beginPath()
    cc.moveTo(x,y)
    cc.lineTo(x,y)
    cc.lineTo(x,y) // minimum of two
    cc.closePath()
    cc.fill()
  • fill() fills in the shape with the color of fillStyle

    • Example:


    cc.fillStyle = "pink"
    cc.beginPath()
    cc.moveTo(50,100)
    cc.lineTo(100,0)
    cc.lineTo(150,100)
    cc.closePath()
    cc.fill()