Building HTML5 Canvas projects from scratch
- 1x (Normal)
1 HTML5 Canvas Projects Course intro4:00
2 How to use this course2:11
3 Basic Canvas Setup for project2:30
4 Setting project variables4:36
5 How to draw the ball2:43
6 requestAnimationFrame and clear frame for animation3:12
7 create boundaries for ball change directions6:44
8 random color for the ball2:32
9 Adding cool effects to the project5:33
11 Setup HTML5 Form type and Canvas7:18
12 Setup project variables for drawing on canvas4:21
13 Create addEventListeners and add functions for interaction5:21
14 How to get the mouse position on canvas8:37
15 Drawing on the canvas paths and lines4:49
16 Using dynamic colors and marker widths to draw on canvas4:56
17 Clear canvas start again4:09
20 Add jquery to send AJAX2:12
18 Save to base64 image code create new image from canvas content5:19
19 Project Tweaks slider3:02
21 Using AJAX to send image data and PHP to create images on the fly5:51
22 Creating images on the fly storing them to the server4:45
23 Code overview and summary7:54
25 Cursor style Tweak2:05
About This Class
Building HTML5 Canvas projects from scratch
Best way to learn is by real examples of code, showing you how the code works together to create amazing applications from scratch.
I have over 15+ years of web development experience, and have worked on hundreds of web applications just like these. One of the best ways to learn is by example, so I've created some projects that really demonstrate core applications that can be created using html5.
All of the source files are included, top resources and links are shared throughout the course. Code samples are explained step by step, and you are encouraged to work along with the course material.
Project one canvas animation tutorial - designed to demonstrate animation in HTML5 canvas
- Covers basic concepts of how to animate in canvas
- how to create arcs and circles
- how to apply logic to create a continuous animation
Project two create user generated images - learn how to draw on the HTML5 canvas and output those images.
- basics of scoping a project from scratch
- setup html5 field types and buttons
- link to bootstrap and jquery
- apply event listeners for user interaction
- get mouse cursor position and calculate actions
- event triggered functions
- pass base64 image data to webpage
- use AJAX to send image data to the server
- use PHP to generate png files from the HTML5 canvas drawing
In addition, I provide regular support to students. Also course upgrades and new projects will be added regularly.
The code in these projects is included!!! for you to be able to get a jump start on creating your own projects using Canvas.
Class Projects 1 See All
Providing Smart digital solutions online since 2001. I am considered a true web technology expert. Having professional experience in a wide range of digital areas. Everything from Search Marketing, Video Marketing, Content creation, User Experience, application architecture, and web programming.
Understanding how users flow through the web and learning what drives users to interact online has been the cornerstone of what I do. The more seamless the process the better the user experience and the more likely they are to interact again and share their experiences.
After launching my first websites I quickly realized that to get traffic on your site you need to be able to market online. Research and using personal experimentation as to what are the most successful ways to effectively drive traffic to my websites, I was able to successfully build multiple success eCommerce sites. I used my expertise to provide Search Engine Marketing Services SEO to 100's of clients.
In the advent of Social Media in 2006, I had identified it as an excellent opportunity to drive traffic and connect with users. I created many successful sites that integrated with Myspace and then later into Facebook. I was able to monitize the traffic on several platforms, driving in some cases 10K+ clicks daily to the various platforms. I continued to perfect the art of Internet marketing and adapt to new technology and changes.
In 2008 I created my first YouTube video, and channel. Realizing that there was another great opportunity with video I have been experimenting with video marketing and video monization. Youtube being the second largest search engine has a very bright future. As technology progresses the trend has always been quicker, easier means of delivering content always wins out. Images beat out text as they are easier and quicker for us to process, videos beat out images being the most efficient means of getting content to users. As bandwidth increases, and more platforms that can even easier deliver videos become available videos will be the trend for the future.
Understanding technology provides a means to better connect with users.
Applications I've created have entertained, informed and engaged tens of millions of people. I have over billions of page views on various platforms, and have sent millions of click through visitors.
I have developed hundreds of web applications, from micro sites to enterprise level platforms.