Ideas for more advanced canvas topics?

programming web dev
1

Hi everybody - I’ve started a new series of tutorials that cover more advanced topics revolving around how to work with the Canvas by continuously improving how we can draw and display a grid!

The current list of tutorials are:

  1. Drawing a Perfect Grid
  2. Creating a Fullscreen Grid
  3. Upcoming: Continuously Sliding/Animating our Grid
  4. Upcoming: Skewing our Grid
  5. Upcoming: Making the Grid Act as a Background Element

Thoughts on any other topics I should cover beyond these?

Cheers,
Kirupa :grinning:

2

Maybe show off the requestAnimationFrame api for animations?

1 Like
3

Yes! :fire:

My next article is going to cover that and even delta time to ensure consistent animation speeds. It will be an amalgamation of a few articles all put together as part of one example :grinning:

4

Hi! Could it be: how to add a ruler to a canvas? How to deal with the units (px, inch, milimiters, cm)?
and derived from that:

  • how to drag & drop the canvas?
  • zoom in & zoom out…
1 Like
5

@aka_pepe - these are great ideas! Thanks for sharing :slight_smile:

For the ruler idea…I am assuming this ruler will be visually accurate independent of the screen DPI?

For zoom, you could use this technique to detect the levels: Detecting Browser Zoom Changes in JavaScript

6

Here are some advanced ideas:

  • Better Animations – Make animations smoother and more realistic using physics like gravity and speed.
  • Faster Performance – Optimize your canvas by reducing unnecessary drawings and using tricks to make it run smoothly.
  • 3D Graphics with WebGL – Instead of just 2D drawings, use WebGL to create 3D objects and animations.
  • New HTML5 Features – Keep up with the latest web updates to improve how your canvas interacts with other elements.
  • Advanced UI Design