# Ideas for more advanced canvas topics?

**URL:** <https://forum.kirupa.com/t/ideas-for-more-advanced-canvas-topics/672263>\
**Category:** web dev\
**Created:** [December 26, 2024, 4:30am UTC](https://forum.kirupa.com/t/ideas-for-more-advanced-canvas-topics/672263 "2024-12-26T04:30:42Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 26, 2024, 4:30am UTC](https://forum.kirupa.com/t/ideas-for-more-advanced-canvas-topics/672263/1 "2024-12-26T04:30:42Z")

</div>

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](https://www.kirupa.com/canvas/drawing_perfect_grid.htm)
2. [Creating a Fullscreen Grid](https://www.kirupa.com/canvas/creating_a_fullscreen_grid.htm)
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 😀

---

<div class="post-metadata">

**Author:** ![MorphicPro](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/morphicpro/32/27889_2.png) [@MorphicPro](https://forum.kirupa.com/u/MorphicPro)\
**Post date:** [December 28, 2024, 7:10pm UTC](https://forum.kirupa.com/t/ideas-for-more-advanced-canvas-topics/672263/2 "2024-12-28T19:10:02Z")

</div>

Maybe show off the requestAnimationFrame api for animations?

> **[Window: requestAnimationFrame() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame)**
>
> The window.requestAnimationFrame() method tells the
> browser you wish to perform an animation. It requests the browser to call a
> user-supplied callback function before the next repaint.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 29, 2024, 2:30am UTC](https://forum.kirupa.com/t/ideas-for-more-advanced-canvas-topics/672263/3 "2024-12-29T02:30:23Z")

</div>

Yes! 🔥

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 😀

---

<div class="post-metadata">

**Author:** ![aka\_pepe](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/aka_pepe/32/27304_2.png) [@aka\_pepe](https://forum.kirupa.com/u/aka_pepe)\
**Post date:** [January 30, 2025, 3:17pm UTC](https://forum.kirupa.com/t/ideas-for-more-advanced-canvas-topics/672263/4 "2025-01-30T15:17:27Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [February 5, 2025, 2:31pm UTC](https://forum.kirupa.com/t/ideas-for-more-advanced-canvas-topics/672263/5 "2025-02-05T14:31:15Z")

</div>

@aka_pepe - these are great ideas! Thanks for sharing 🙂

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](https://www.kirupa.com/javascript/detecting_browser_zoom_changes.htm)

---

<div class="post-metadata">

**Author:** ![Ahad7546](https://avatars.discourse-cdn.com/v4/letter/a/439d5e/32.png) [@Ahad7546](https://forum.kirupa.com/u/Ahad7546)\
**Post date:** [February 12, 2025, 11:37am UTC](https://forum.kirupa.com/t/ideas-for-more-advanced-canvas-topics/672263/6 "2025-02-12T11:37:31Z")

</div>

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**