ALL ABOUT CANVAS and CANVAS GAMES - ✔

This "All about CANVAS and CANVAS GAMES"-repository catches up its focus on all the projects I was working on while using on a canvas system through the years as a SAE-Web Development student with exercise lessons every week as well as tutorial videos on Youtube. Direct Link to the place where I'm studying are you going to find HERE

{💥} => HERE are 25 CRAZY CANVAS EXPERIMENTS to demonstrate of what canvas can actually do (also for your next project)

Folder Directory✅

Topic	Content
01_CanvasBasics	01_CanvasBasic / 02_DrawingEditor / 03_TextRender / 04_ImageRender / 05_ClockRender / 06_CanvasAnimation
02_CanvasMoneyGame	Canvas Game based on a "Dagobert Duck" game
03_SnakeGame	Canvas Game based on Snake
04_AudioVideo	01_VideoTag / 02_PlayPauseVideo / 03_Webcam / 04_VideoJS / 05_AudioTag / 06_AudioMixer / 07_HowlerJS
InfoCanvas	Canvas Cheat Sheet Version 1 / Version 2

⚫🔴🟡 IMPORTANT: Comments in each file are commented in german⚫🔴🟡

Technologies and Installation (Stored at core > lib-folder) ✅

(TO SIMPLIFY) - JQUERY - INSTALLATION:

https://cdnjs.com/libraries/jquery (if you would like to use JQUERY in your project)

(TO MAKE SOUND) - HOWLER - INSTALLATION:

https://howlerjs.com/ (if you would like to use HOWLER.JS in your project)
Howler.js is the common JavaScript Audio library for the modern web, easy and reliable across all platforms

(TO ANIMATE) - PIXI - INSTALLATION:

https://pixijs.com/ (if you would like to use PIXI.JS in your project), the fastest, most flexible 2D WebGL renderer.
Pixi. js is used to animate scenes of graphical objects. You can load, move and rotate images, as well as change their colour, tint and opacity. You can also add graphic objects to a container and move the container as a unit.

(TO DESIGN) - SEMANTIC UI - INSTALLATION:

https://semantic-ui.com/ (if you would like to use SEMANTIC.UI in your project)
Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

CANVAS - Useful Assistance ✅

CANVAS:

is a "Leinwand" on which you can draw / display objects and surfaces. Here are some additional examples.

is pixel-based, unlike the other HTML5 elements, consisting of Width and Height. We have control over every single pixel.
elements do have 2D-Context: (X- / Y- axis based while "WEBGL" has 3Dimensional points.
do have attributes like: Alpha True (Transparent background), Fill (fill area), Stroke (outlines): Draw images, texts, paths, etc...
are integrated in Google Maps where it can be used to reload map material each time you zoom (interactivity).
image rendering is alyways fixed on the (0/0)-starting point in the upper left corner.
or better known as <canvas> element is also used by the Canvas API to do 2D graphics on web pages. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used over there.

ANTI-ALIASING:

Calculates clean transitions, straight lines. Semi-transparency must be calculated everywhere to achieve sharp transitions on a pixel basis.

Collaboration ✅

Feel free to contact me if you've seen something wrong, found some errors or struggled on some mistakes! Always happy to have a clean sheet here! :)

FAQs ✅

0 Questions have been asked, 0 answers have been given, 0 changes have been made.