Screenshot from Wes Bos' Javascript 30 Day 8 challenge
Screenshot from Wes Bos’ Javascript 30 Day 8 challenge

Overview: Using the HTML5 api, create a full screen canvas to draw a line on; line will use HSL to create gradient colours, vary in width, and having a blending mode applied

Properties used

  • HTML5 canvas
  • JS .querySelector()
  • JS .getContext() (2d, 3d)
  • JS .innerWidth, .innerHeight
  • JSĀ .strokestyle
  • JS .lineJoin
  • JS lineCap
  • JS lineWidth
  • JS globalCompositionOperation
  • JS .beginPath()
  • JS .moveTo()
  • JS .lineTo()
  • JS .stroke()
  • JS templates
  • JS addEventListener
  • JS arrow functions
  • hsl, hue

Leave a Reply

Your email address will not be published. Required fields are marked *