/canvas-practice

practicing html canvas with js for Get Coding

Primary LanguageJavaScript

canvas-practice

https://parrottjrs.github.io/canvas-practice/

During my downtime while working on Totes McNotes, I discovered html5 canvas and really dug the concept.

I spent some time watching tutorials and learned how to draw on the canvas, as well as core concepts using js.

Core concepts I touched on during this project:

  • canvas context
  • drawing on HTML5 canvas
  • OOP
  • gravity
  • friction
  • animation
  • collision detection
  • event handling

The first thing I worked on was a simple program that creates a predetermined number of balls that are all random sizes and colors. The balls fall from the top of the browser and bounce until they slow to a stop.

The second part was the basis for the "canvas mode" of Totes McNotes. It's a simple bit of code that creates squares and allows the user to drag them around in the browser.

I had a ton of fun messing around with this stuff. If you've never used canvas before I recommend giving it a try :)

Screen.Recording.2023-04-15.at.8.46.31.PM.mp4

Screenshot 2023-04-12 at 10 15 39 PM