Mouse Drag with Svelte and Vanilla JS

Because it’s simple

There is a nice article on how to use mouse drag with rxjs. With the modern javascript frameworks and libraries, we got to the point where is hard to do simple things. We don’t need rxjs, all we need is vanilla js. Svelte is just a cherry on the top.
Let’s check how we can use Svelte and vanilla js to create something like this with ease.

What we need:

1. 😊 Svelte
2. 😉 Nothing else
3. 😎 Nothing else

Of course, we need native JS event handling and canvas to paint.

We need canvas element and mousedown event. We need to register mousemove and mouseup events. On the mousemove event we paint on the canvas. And on the mouseup event we cleanup all event listeners.

Result

With Svelte we can enjoy the beauty and simplicity of web development, without boilerplate code.