Canvas often feels like a mystery box—we use tools built on top of it, but few of us truly understand how it works. If you're a JavaScript developer, this might sound familiar 😊. Back in May 2020, when I was at HackerRank and we were looking for a whiteboard to integrate, we chose Excalidraw for its simplicity after reviewing many options. Back then, I was very familiar with React, Webpack, and other tools as I used them daily at work. So, I proposed to the excalidraw team that we could build an npm package. Since Excalidraw was at a very early stage and supporting the npm package would introduce a huge change in the codebase, it took me some time to convince them. Meanwhile, I forked the repo, and we shipped the editor at HackerRank. However, I was aware of the nightmare it would introduce to keep the forked codebase up to date if we don’t push the changes to the base repository so I was having back-and-forth conversations with the Excalidraw team regarding the npm package. Finally, after ~8 months, WE DID IT! This was my AHA moment! Thus, I started maintaining the npm package. However, I knew nothing about Canvas, but I was really curious about how these drawing tools worked inside. It seemed so cool that you could draw any shape and interact with it. As a maintainer of the NPM package, I had the chance to dive deep into the codebase. However, the canvas was still a puzzle I was trying to solve. Over time I learned a lot (I am still learning as learning can never end :p) and started building core canvas features, some of which were Text containers, Labeled arrows, adding points in line segments, hyperlinks, and more, and every time I realized there weren’t enough resources on the web about Canvas. Why this workshop? Besides my passion for open source, I love sharing what I've learned and experienced. As there aren’t enough resources on the web regarding Canvas, I want to make it more accessible so anyone can easily learn about it. That's how I started speaking at conferences three years ago. I always aim to share my insights in my talks, and I enjoy doing it. I’ve delivered talks and podcasts on Canvas, where I discuss building features like text containers, labeled arrows, and other whiteboard functionalities, along with how they are implemented in Excalidraw. You can check out my talks and podcasts (I will be adding the 2024 ones soon). While giving these talks, I noticed that although not many people explore Canvas-related topics, the audience is curious and enjoys learning about the unknown and how things work behind the scenes. This inspired me to do it even more! Since then I wanted to dive in one level deeper and do a workshop where we not only dive into the concepts but also build this stuff together - yes that’s the IDEA - A deep dive Hands-on workshop where we start from the basics and deep dive into internals turning these implementations into reality. I have been thinking of doing this workshop for months and years. Last year I gave a workshop about “Building a whiteboard from scratch” at React Alicante and wanted to do more. But I couldn’t prioritize it but why am I finally doing it? Recently at React India in Goa, Tejas and I were having a casual conversation, and suddenly this topic came up: "Hey Aakansha, why don’t you run a workshop on Canvas?", I replied, "Really? Do you think people will be interested? I have been thinking about this for a long time".Tejas is an awesome community member and an amazing friend. He strongly encouraged me to go for it, and the following week, I launched the website with the workshop announcement✨. Hence here I am doing the workshop On January 25, 2025. What will you learn? The workshop will start with the basics, keeping it beginner-friendly, right from how to render the Canvas and then take a deep dive into the internals. And the best part is it’s not just theory but lots and lots of hands-on. Here is a quick overview 👇 HTML Canvas Fundamentals - Learn how to use Canvas APIs for drawing shapes and paths. This will ensure the workshop is completely beginner friendly and slowly we deep deeper into internals.
Hit Testing and Interactive Canvas - Have you wondered how user interactions work in Canvas? To understand this will be diving into techniques like Hit Testing to enable the selection, movement, and resizing of Canvas shapes.
Navigating the Infinite Canvas - Building Infinite Canvas and learning how to manage the viewport to make it interactive. This might be your favorite part as everyone loves endless Canvases, isn’t it?
Text and HTML Rendering - Rendering Text in Canvas and making it interactive with HTML elements. This might sound simple but there is a lot to explore when it comes to text rendering and making it in sync with the HTML Input element used for updating the text element.
Performance Optimizations - Learn how to improve performance with complex Canvas applications. During the workshop, we will come across cases where we need to improve the performance for rendering the Canvas shapes and this will help us understand the techniques which can be used to improve the performance of Canvas-based applications.
Build a Mini Whiteboard - This is the best part as together, we will build a mini Canvas-based whiteboard editor using all the concepts learned above. You can find more details about my workshop here. Register with an Early bird discount If any of this sounds interesting and exciting to you, sign up for my workshop with a special early bird discount of 40% until the 1st of December. I would love to see you there!. If you know someone who might be interested, please do share it with them :). Since it's a live workshop, seats are limited, so the sooner you register, the better :). The recordings will also be provided after the workshop. I am still working on the exact time of the workshop, based on the registrants across the world and I will soon share more details on the same. If you have any questions or suggestions, please comment or contact me on LinkedIn, Twitter, or Bluesky. I'd love to hear from you! If anything is stopping you from joining the workshop, my DMs are open. Let me know, and I'll do my best to help :) Closing thoughts I am very excited about the workshop. I'm learning a lot during this process, though I must admit some things are quite challenging! I will document all my learnings and experiences from this workshop. Until then, goodbye and have a great day, and see you soon! Canvas often feels like a mystery box—we use tools built on top of it, but few of us truly understand how it works. If you're a JavaScript developer, this might sound familiar 😊. Back in May 2020, when I was at HackerRank and we were looking for a whiteboard to integrate, we chose Excalidraw for its simplicity after reviewing many options. Back then, I was very familiar with React, Webpack, and other tools as I used them daily at work. So, I proposed to the excalidraw team that we could build an npm package. HackerRank Excalidraw React, Webpack, and other tools npm package. Since Excalidraw was at a very early stage and supporting the npm package would introduce a huge change in the codebase, it took me some time to convince them. Meanwhile, I forked the repo, and we shipped the editor at HackerRank. However, I was aware of the nightmare it would introduce to keep the forked codebase up to date if we don’t push the changes to the base repository so I was having back-and-forth conversations with the Excalidraw team regarding the npm package. Finally, after ~8 months , WE DID IT! This was my AHA moment! Thus, I started maintaining the npm package. ~8 months WE DID IT! AHA However, I knew nothing about Canvas, but I was really curious about how these drawing tools worked inside. It seemed so cool that you could draw any shape and interact with it. As a maintainer of the NPM package, I had the chance to dive deep into the codebase. However, the canvas was still a puzzle I was trying to solve. Over time I learned a lot ( I am still learning as learning can never end :p ) and started building core canvas features, some of which were Text containers , Labeled arrows , adding points in line segments , hyperlinks , and more, and every time I realized there weren’t enough resources on the web about Canvas. I am still learning as learning can never end :p Text containers Labeled arrows adding points in line segments hyperlinks Why this workshop? Besides my passion for open source, I love sharing what I've learned and experienced. As there aren’t enough resources on the web regarding Canvas, I want to make it more accessible so anyone can easily learn about it. That's how I started speaking at conferences three years ago. I always aim to share my insights in my talks, and I enjoy doing it. I’ve delivered talks and podcasts on Canvas, where I discuss building features like text containers, labeled arrows, and other whiteboard functionalities , along with how they are implemented in Excalidraw . You can check out my talks and podcasts ( I will be adding the 2024 ones soon ). talks podcasts text containers, labeled arrows, whiteboard functionalities Excalidraw talks podcasts I will be adding the 2024 ones soon While giving these talks, I noticed that although not many people explore Canvas-related topics, the audience is curious and enjoys learning about the unknown and how things work behind the scenes. This inspired me to do it even more! This inspired me to do it even more! Since then I wanted to dive in one level deeper and do a workshop where we not only dive into the concepts but also build this stuff together - yes that’s the IDEA - A deep dive Hands-on workshop where we start from the basics and deep dive into internals turning these implementations into reality. IDEA I have been thinking of doing this workshop for months and years. Last year I gave a workshop about “Building a whiteboard from scratch” at React Alicante and wanted to do more. But I couldn’t prioritize it but why am I finally doing it? “Building a whiteboard from scratch” React Alicante why am I finally doing it? why am I finally doing it? Recently at React India in Goa, Tejas and I were having a casual conversation, and suddenly this topic came up: " Hey Aakansha, why don’t you run a workshop on Canvas? ", I replied, " Really? Do you think people will be interested? I have been thinking about this for a long time ".Tejas is an awesome community member and an amazing friend. He strongly encouraged me to go for it, and the following week, I launched the website with the workshop announcement✨. React India Tejas Hey Aakansha, why don’t you run a workshop on Canvas? Really? Do you think people will be interested? I have been thinking about this for a long time Hence here I am doing the workshop On January 25, 2025. January 25, 2025. What will you learn? The workshop will start with the basics , keeping it beginner-friendly , right from how to render the Canvas and then take a deep dive into the internals. basics beginner-friendly And the best part is it’s not just theory but lots and lots of hands-on . Here is a quick overview 👇 lots and lots of hands-on HTML Canvas Fundamentals - Learn how to use Canvas APIs for drawing shapes and paths. This will ensure the workshop is completely beginner friendly and slowly we deep deeper into internals. Hit Testing and Interactive Canvas - Have you wondered how user interactions work in Canvas? To understand this will be diving into techniques like Hit Testing to enable the selection, movement, and resizing of Canvas shapes. Navigating the Infinite Canvas - Building Infinite Canvas and learning how to manage the viewport to make it interactive. This might be your favorite part as everyone loves endless Canvases, isn’t it? Text and HTML Rendering - Rendering Text in Canvas and making it interactive with HTML elements. This might sound simple but there is a lot to explore when it comes to text rendering and making it in sync with the HTML Input element used for updating the text element. Performance Optimizations - Learn how to improve performance with complex Canvas applications. During the workshop, we will come across cases where we need to improve the performance for rendering the Canvas shapes and this will help us understand the techniques which can be used to improve the performance of Canvas-based applications. Build a Mini Whiteboard - This is the best part as together, we will build a mini Canvas-based whiteboard editor using all the concepts learned above. HTML Canvas Fundamentals - Learn how to use Canvas APIs for drawing shapes and paths. This will ensure the workshop is completely beginner friendly and slowly we deep deeper into internals. HTML Canvas Fundamentals Canvas APIs drawing shapes and paths. beginner friendly Hit Testing and Interactive Canvas - Have you wondered how user interactions work in Canvas? To understand this will be diving into techniques like Hit Testing to enable the selection, movement, and resizing of Canvas shapes. Hit Testing and Interactive Canvas - user interactions Hit Testing selection, movement, resizing Navigating the Infinite Canvas - Building Infinite Canvas and learning how to manage the viewport to make it interactive. This might be your favorite part as everyone loves endless Canvases, isn’t it? Navigating the Infinite Canvas Infinite Canvas Text and HTML Rendering - Rendering Text in Canvas and making it interactive with HTML elements. This might sound simple but there is a lot to explore when it comes to text rendering and making it in sync with the HTML Input element used for updating the text element. Text and HTML Rendering Text interactive Performance Optimizations - Learn how to improve performance with complex Canvas applications. During the workshop, we will come across cases where we need to improve the performance for rendering the Canvas shapes and this will help us understand the techniques which can be used to improve the performance of Canvas-based applications. Performance Optimizations performance Build a Mini Whiteboard - This is the best part as together, we will build a mini Canvas-based whiteboard editor using all the concepts learned above. Build a Mini Whiteboard mini Canvas-based whiteboard editor You can find more details about my workshop here . here Register with an Early bird discount If any of this sounds interesting and exciting to you, sign up for my workshop with a special early bird discount of 40% until the 1st of December . I would love to see you there!. If you know someone who might be interested, please do share it with them :). workshop early bird discount of 40% until the 1st of December Since it's a live workshop, seats are limited , so the sooner you register, the better :). The recordings will also be provided after the workshop. seats are limited recordings I am still working on the exact time of the workshop, based on the registrants across the world and I will soon share more details on the same. exact time If you have any questions or suggestions, please comment or contact me on LinkedIn , Twitter , or Bluesky . I'd love to hear from you! LinkedIn Twitter Bluesky If anything is stopping you from joining the workshop, my DMs are open. Let me know, and I'll do my best to help :) Closing thoughts I am very excited about the workshop. I'm learning a lot during this process, though I must admit some things are quite challenging! I will document all my learnings and experiences from this workshop. Until then, goodbye and have a great day, and see you soon!

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Giving My First Talk

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How I Went From Knowing Nothing About Canvas to Hosting a Workshop

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Giving My First Talk

Canvas And React: A Simple Guide To Data Charts

Custom Progress Bar with Jetpack Compose Canvas API: Tutorial

How to Get Base64 Encoded Data from an HTML Image Element in JavaScript

JavaScript: Do you like games? (part 1)

Giving My First Talk

Canvas And React: A Simple Guide To Data Charts

Custom Progress Bar with Jetpack Compose Canvas API: Tutorial

How to Get Base64 Encoded Data from an HTML Image Element in JavaScript

JavaScript: Do you like games? (part 1)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps