Drawma is a simple drawing website built alongside the Coding Nepal tutorial. The website utilizes the HTML canvas element to allow users to draw outline shapes, filled shapes, straight lines, and various brush and eraser sizes in the user's colors of choice. Drawings can be saved to the user's personal device.
Drawing App in JavaScript video by Coding Nepal
More information about <canvas> can be found here:
- HTML Living Standard-- The canvas element
- Can I Use-- HTML element: Canvas
- MDN Web Docs-- HTML Canvas Element
- HTML Canvas Deep Dive by Josh Marinacci
I was interested in creating this project to learn more about the HTML5 canvas. Canvas is a container for JavaScript-created graphics and includes several methods for drawing paths and shapes. Canvas is often used to make 2D JavaSript games, which I am determined to create as a personal project in the future. I first began learning about Canvas through Chris Courses YouTube Tutotials and used this project to dip my toes into the code.
During this project I learned about the DOM method getContext which was respresented by ctx in the coded application. The function takes only one parameter-- the type of context (2D). I was then able to set properties like beginPath, stroke, fillStyle, strokeRect, arc, lineTo, etc. to draw and style shapes within the canvas.
I also learned that the origin of the coordinate grid used for canvas is in the upper left corner with the y axis going down (and I also learned that this is common for computer graphics). When I first began drawing onto the canvas, I noticed that the mousedown event started the drawing far away from my mouse. We corrected this behavior using the offsetX and offsetY properties from the MouseEvent object which allowed access of the X an Y coordinates of the mouse pointer within the canvas.
There are lots of ways I could take this project to the next level. Some ideas I'd consider for future development include adding a 'create text' button, make the application usable on touch devices by using touch events in addition to mouse events, and 'undo' functionallity by storing drawing history into an array and popping off the last action.
I am in awe of the Classic MS Paint clone (www.jspaint.app) created by 1j01. The possibilities are endless!
Visit https://elizabetholsavsky.github.io/drawma/ to begin drawing. Choose a color from the palette or use the color picker (white paint pot). Use a shape tool or brush to begin drawing. Note that the line width can be adjusted using the slider. Toggle 'Fill' to draw solid shapes in the color of your choice. If you make a mistake, use the 'Eraser' tool which is also available in a range of sizes using the slider. If you would like to save your image, click the 'Save' button to save your artwork as a .jpeg file or click the 'Clear' button to start over again. Remember, every masterpiece begins with a single stroke...
- Email elizabetholsavsky@gmail.com
- LinkedIn https://www.linkedin.com/in/elizabetholsavsky/
- Portfolio https://elizabetholsavsky.com/
- Hashnode Blog https://blog.elizabetholsavsky.com/
- Twitter @elizavsky