SketchSpace

We are finally coming to the completion of my whiteboard project! Today I did some bug fixes, mainly an issue where it was very hard to use the text tool on mobile as you would have to hold down with one hand and type with the other. Now you just tap once then are free to type your text. I also added a website icon that I think looks very nice and fits the theme of my website. I then added a pan tool so that users who were on mobile or couldn’t use (space + drag) would be able to pan the canvas. I also fixed a quality of life issue where the undo/redo tool only undid/redid parts of a line, not the whole line/stroke which was annoying as you had to click undo/redo multiple times to get the desired outcome. This was difficult to recode as I had to almost completely change how lines were stored in order to achieve the desired outcome/quality. I will probably ship this in the next few days and start another project unless I get the urge/inspiration to code some more features. Honestly, I am so happy that i decided to undertake this journey of coding and I think this website is really nice and to a high level of quality. I hope you enjoy using it just like I enjoyed making it!

Today was quite a calm day, spent most of today just adding quality of life features as well as bug fixing and adding mobile support. I added a magnifier tool on the bottom right that allows users to see how far they are zoomed in, it also means that users can now zoom in/out on mobile as they couldn’t before (no scroll). I also made my icons much better as they looked quite bad. As i mentioned before, the paint bucket tool was extremely buggy, it would not work and constantly bug out when zooming in/out so i completely fixed that. I had to almost rewrite the whole function for it but it was worth it as it is much better now. I also fixed some bugs that were occurring on mobile, such as the drawing bugging out and some tools not functioning properly. The one main bug that I still haven’t fixed is that the text tool is really finicky on mobile and often does not work (you have to hold it down with one finger and type with the other), so I need to fix that. Overall, nearing the end of my project and can’t wait to see what I do next!

Today I added pan/zoom functionality as well as an export canvas feature. The pan/zoom was quite tedious to add as I kept running into bugs and errors where the drawings/lines would bug out and completely disappear or just duplicate over and over as you tried to pan or zoom. Eventually, I managed to figure it out and I am very happy with how the final product turned out. The user now has much more room to work with and can easily zoom out/in and see all of their drawings. The other feature I added was an export button that allows the user to download a png of the current canvas window. This was much simpler than the zoom/pan but still took a bit of time to figure out. But, the main issue now is that the info button is not visible at the bottom of small screens, which is the main issue I need to fix/improve. Overall, I am extremely happy with today’s work. The next things I want to add are multiple layers and multiple canvas pages.

Today I worked on adding an undo and redo button as I felt it is an essential feature of many online whiteboards and is a great quality of life addition. I made these buttons also have their respective commands (Ctrl + Z, Ctrl + Y). I then added some basic shape tools to the whiteboard that appears in a popup when clicked on the sidebar. These include (Line - L, Rectangle - R, Circle - O and Arrow -A). These features took a long time because I have to make all actions save in sequence so they could be redone and undone. I also needed to make the shape tools update and resize as you drew them. Overall, happy with the work done today and my whiteboard is coming together. Although, once all of the features I have in mind are finished, I will need to make it look much better as it’s quite an eyesore right now.

Today I learned about how mobile touchscreens work and how to properly implement mobile support into the whiteboard. This was frustrating as I kept failing and getting errors. I finally managed to get a somewhat ok experience on mobile which I will take as a win. I also added functionality to the clear all button (you can now clear the canvas) as well as some basic keyboard shortcuts which you can find from the popup menu (P - Pen, E - Eraser, C - Clear). The next thing I need to do is make the mobile support better and start thinking of and adding more features to the whiteboard as it is pretty bare bones right now.

Added the basic structure for the html section of the website and created a canvas element that will be helpful in the future when creating the website. It does not look too good right now but as I add the css and js functionality it will look much better.