https://github.com/samethope/canvasplusplus

Web canvas made of html, js and css. Used as a fun web dev practice project.
https://github.com/samethope/canvasplusplus

canvas css html js theodinprojectfoundations

Last synced: about 1 month ago
JSON representation

Web canvas made of html, js and css. Used as a fun web dev practice project.

• Host: GitHub
• URL: https://github.com/samethope/canvasplusplus
• Owner: SametHope
• Created: 2023-12-31T19:29:16.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-31T20:15:37.000Z (over 2 years ago)
• Last Synced: 2025-08-08T19:06:23.240Z (11 months ago)
• Topics: canvas, css, html, js, theodinprojectfoundations
• Language: JavaScript
• Homepage: https://canvasplusplus.netlify.app/
• Size: 30.3 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# CanvasPlusPlus ![icon](https://github.com/SametHope/CanvasPlusPlus/assets/85421686/967cc7a2-8e6b-4a3e-9fea-0d9e530c12fe)

This is one of my first web projects, inspired but not directly made for the [The Odin Project](https://www.theodinproject.com/lessons/foundations-etch-a-sketch). This project served me as mean to practice html, css and javascript. It intentionally avoids making use of the [html canvas element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas).

This web app makes use of Bresenham's Line Algorithm, has save and load features as a custom json files, customizable brush color and size, undo functionality and more.  

A live demo can be checked out here: https://canvasplusplus.netlify.app/  

If I ever come back to this project I am planning to add lightening, darkening, in-canvas color picking, bucket fill and move the options menu besides the canvas as a QOL.

## Some Relevant Images

### Empty Canvas

![2023-12-31 23_10_28-Window](https://github.com/SametHope/CanvasPlusPlus/assets/85421686/5a42b1be-8acf-406b-b272-cfc9d8a98140)

### Canvas Options

![2023-12-31 23_10_42-Window](https://github.com/SametHope/CanvasPlusPlus/assets/85421686/6da5b48f-feed-4f7e-af2c-2c6e8b7f3f4c)

### An Image Made With The App

![2023-12-31 23_11_00-Window](https://github.com/SametHope/CanvasPlusPlus/assets/85421686/0998f930-dd31-4a82-b416-a9d68f8da9b3)