Is there a JS drawing plugin for canvas (arrow placement on screenshots)?

Question

JavaScript

Hello.
Tell me if anyone knows if there is already a plugin for drawing on canvas in the spirit of light WYSIWYG editors (so that you can feed it the id of the canvas and buttons for the toolbar).
The task is to place icons, arrows and captions on the photo, and then save this case into a picture.

Answer 1

Throw out global variables.
As for the names: i, j, x is normal practice, although usually some kind of k goes with i and j. lng - everything is clear too. Here, something obviously needs to be done with i18n.t, because it is taken from somewhere outside, it is not clear what it does and what it refers to. You can, of course, guess that this is an internationalization object that returns the given value in the current language, but still. If you do not arrange all this in a separate object, then at least it is worth passing such things as function parameters, maybe the code will become more readable.
But the loop itself in shuffle() reads terribly. It's not about the naming, it's about the design.

buttons.push(painters[0]);      
buttons.push(painters[1]);
buttons.push(painters[2]);
buttons.push(painters[3]);
...
document.getElementById("btn1").innerHTML = buttons[0];
document.getElementById("btn2").innerHTML = buttons[1];
document.getElementById("btn3").innerHTML = buttons[2];
document.getElementById("btn4").innerHTML = buttons[3];

It's easier to do with a loop or forEach (). If filter() is used, it is apparently supposed to support it, and hence forEach(). You can also use slice() for the first part.

Answer 2

I would advise to "complicate the code" with normal names!
i18n.t, lng, j, x, i - do you have rheumatism? Write the full names,
otherwise you don’t want to peer so much to understand what you are doing in the cycle.

Answer 3

1. A bunch of variables/names in the global scope (window) is a terrible idea.
2. Generalize it all into a normal object/multiple objects and your code will become cleaner and simpler.
You have already been told about readability and names.

Answer 4

www.ozon.ru/context/detail/id/6287517
JavaScript. Templates - Stoyan Stefanov
This book describes how to write code. Written in very good language.