A brief intro to the site and a button that sends you to the canvas page.
The main page of that app. Here lives the canvas with color picker and line width input field. There is a clear canvas button and a link back to the landing page.
Links to my Github, LinkedIn, Twitter, and portfolio pages
)
This Javascript code, in Vue.js, handles the dynamic width and height of the canvas. It resizes the canvas when it loads.
This function sets all the properties of the canvas with the dynamic variables and begins drawing.
The changeHandler function retrieves the values from the inputs and sets the variables to those values. The clearCanvas function does just what it sounds like, gives us a blank slate to start over again.
I was having trouble getting the canvas to resize without manually refreshing the page. This function inside the Vue lifecycle hook takes care of that as you resize your screen.
Creativity Canvas was built as a Vue.js application. I recently started learning Vue, migrating from React. Both frameworks are great, but I'm starting to favor Vue a bit more. It is so intuitive and easy to understand, and you are using mostly plain HTML in the templates. Styling for this app was achieved with vanilla CSS. I opted not to use a framework to give it a custom feel. I used Github for version control and the site is hosted on Netlify. The icons on the site are from icons8.com.
If you have some cool ideas and would like to contribute, I will definitely consider it. Fork, clone, and send an issue if you have any proposed improvements to the app. This app is built for learning purposes, but I do appreciate any feedback. Thanks for checking it out.