https://github.com/unicar9/project1-hua

💫A fun drawing app, also my first attempt with HTML5 Canvas technology
https://github.com/unicar9/project1-hua

canvas drawing-app ruby-on-rails

Last synced: 3 days ago
JSON representation

💫A fun drawing app, also my first attempt with HTML5 Canvas technology

• Host: GitHub
• URL: https://github.com/unicar9/project1-hua
• Owner: unicar9
• Created: 2017-06-16T02:20:26.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-19T03:55:48.000Z (almost 2 years ago)
• Last Synced: 2023-02-26T22:46:50.416Z (over 1 year ago)
• Topics: canvas, drawing-app, ruby-on-rails
• Language: JavaScript
• Homepage: https://hua-project.herokuapp.com/
• Size: 128 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Project#1 - Hua

I deployed my project on [Heroku](https://www.heroku.com/) so you can experience the whole site in [here](https://hua-project.herokuapp.com/). Register, start drawing and have fun! Also, don't forget to upload your awesome work!

All comments and suggestions are welcome!

![screenshot](http://i.imgur.com/X3fgCPN.png)

![screenshot](http://i.imgur.com/pIwO7Y6.png)

![screenshot](http://i.imgur.com/mQQrHfU.png)

## Overview

In this project, I proposed a **Ruby on Rails** application with online drawing as its core function. It's more of an experimental drawing tool where users can choose among 3 different brushes and draw with random generated colors.

The project name, _Hua_(画), is the literal meaning of drawing in Chinese.

I used HTML, CSS and JavaScript/jQuery for the front-end part, and it's also my first experiment with **HTML5 Canvas** technology.   

## Features

- Every time when users reload the page, change a brush or clear the canvas, there will be a new monochrome background.

- 3 brushes to experiment with, click and then move mouse to draw.

- In basic brush mode, you can choose 3 different brush sizes.

- Users can either save their drawings to computer or upload to the online gallery, where I use [Cloudinary](http://cloudinary.com/) as cloud storage service

- Users can browse other users' works and leave a comment.

___

## Acknowledgments

- I found these blog articles extremely helpful in navigating through the Canvas and building an online drawing app from it. ([one](https://code.tutsplus.com/tutorials/how-to-create-a-web-based-drawing-application-using-canvas--net-14288),

[two](http://perfectionkills.com/exploring-canvas-drawing-techniques/),

[three](http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/)).

- [Adorable Avatar](http://avatars.adorable.io/) helped me generate avatar placeholders for users without profile images.

- I used [Semantic UI](https://semantic-ui.com/) as my front-end framework for this project.

- I used [randomColor.js](https://github.com/davidmerfield/randomColor) to generate aesthetically pleasing random colors for my drawing app.

- I've felt grateful for all the help I got from Luke & Matt and all my classmates along the way in WDI22, Sydney,  [General Assembly](https://generalassemb.ly/).