Programmatically adding texts and shapes to canvas (Typescript).

Technologies: ----------------------- * Code: Node.js + typescript. * Repository: GitHub. Existing project: ----------------------- * A small demo project (1 file with 8 functions) that accepts a JSON as input that contains URLs of images/GIFs and instructions on how to place them on the canvas, merges everything, and output it into one image/GIF file. New requirements: ----------------------- (1) The current code accepts a list of the following items (please convert the type in the ‘master’ branch to be like the ones in the “TS-conversion” branch): { url: '[login to view URL]', width: 320, height: 320, x_location: 100, y_location: 100, } And always assumes and uses it as an image (or a gif file). (2) Requested change: Add another required field to the item (and throw an exception if it’s not present): “type”. The type of the “type” field is “I” (Image or gif) or “T” (Text) or “B” (Background). (3) Items of the “I” type should be used as items have been used so far. (4) Items of the “T” type (i.e. “type” equals to “T”): Should have the following properties: “text” - a string containing text. “cssProperties” - an object of the CSSProperties type from the “react” library. “x_location” - the start location on the X-axis, “y_location” - the start location on the Y-axis, “width” - the width. Should not have the “height” property - as the height will be set by the font size and the number of lines (which will be calculated from the width and length of the text). (5) The final image (i.e the output of the function) should include, for every item of the “I” type, the text from the “text” field. The text should be placed according to the “x_location” and “y_location” fields, and its width shouldn’t exceed the “width” field. (6) The “cssProperties” (only the ones relevant to text) should apply to the text. If CSS cannot be “just applied”, and development should take place in order for it to work - please stop your work before beginning, and let’s agree on which ones should be handled. (7) If 2 parts overlap - one should appear on top of the other, according to their order in the array. (8) The text background should be transparent and reveal the layers underneath it. Uncovered canvas areas should be left transparent in the final result, NOT white! (9) Example for cssProperties: { transform: rotate(-25deg); padding-left: 10%; margin-left: 30%; // The padding and margin should have the same meaning as in css. The background of the text should always be transparent, so it only means the space between the text and borders.. font-family:"Ubuntu"serif ; // If you need a pre-defined list - just put a few as examples, and make it easy for future addition font-size: 2rem; font-weight: bold; color: #fff; } How we work: ----------------------- 1. Access to the existing repository will be given to the relevant people, and that repository is the one that should be used. 2. Code has to be committed for CR and testing. 3. This is the beginning of a long-time project (estimated in months), if the work will have good pace and quality - then we might proceed to an hourly rate in the next project. We’re looking for: ----------------------- * Developer/programmer. * Someone who can share his/her screen via programs that allow it. * Someone who can read a user-story and make sure to perform each and every requirement from it. * Someone who tests his/her code in such a way that all of his/her bugs are edge cases. * Someone who can be available for meetings and chatting in this timeframe: 7 AM-2 PM UTC, Monday-Friday. * Have experience with programmatically editing pictures or videos in canvas. * Please write “I can assist” as the first 3 words of your response, to show that you’ve read this description.