Skip to content
/ art-app Public

A drawing application developed for a Mintbean Hackathon.

Notifications You must be signed in to change notification settings

Jofa11/art-app

Repository files navigation

A super fun drawing app that let's you stretch those artistic muscles!

Home Page

A brief intro to the site and a button that sends you to the canvas page. Home Page

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. Canvas Page

Footer

Links to my Github, LinkedIn, Twitter, and portfolio pages Footer

Wireframe

Homepage

Wireframe-Homepage

Canvas Page

Wireframe-Main )

Code Snippets

This Javascript code, in Vue.js, handles the dynamic width and height of the canvas. It resizes the canvas when it loads. code

This function sets all the properties of the canvas with the dynamic variables and begins drawing. code

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. code

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. code

Technologies Used

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.

Contribution Guidelines

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.

About

A drawing application developed for a Mintbean Hackathon.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published