Drawing on the HTML canvas using JavaScript

Last time we added a canvas to the HTML page and stretched it using CSS so that the layout is responsive and looks well on different screen sizes. In this lecture we experiment with the canvas, change it's size (in pixels), draw lines and rectangles at different locations, scales and rotations to make some houses and a tree. We use some randomization to make the scene more organic and to look differently every time you refresh.

In this course Visual Web Development (VWD) course we study algorithms by implementing and visualizing them in the browser. We use HTML5 Canvas and JavaScript for: interactive applications, image processing, machine learning and games. We limit the use of external libraries so that we understand how things really work.

The main objective this year is to build an augmented reality piano app that allows you to play on a virtual piano. Hand movements will be recognized in real-time from a webcam stream.

Lecture 2: *this video*

Full playlist:

The course was taught once before but with very different objectives inspired by the Marvel cinematic universe (Dr. Strange and Spiderman):

Today's Codename: Little houses on the prairie :-)

#vwd #visualwebdevelopment #proceduraldrawing

[Radu]

Have you ever drawn something using code like this? Or is it the first time you hear about it?
I think it's very useful. Please like this video if you got something out of it :-)

[unknown-bxmy]

Awesome❤
I learn html5 canvas 2d from:
w3 school website + html5 canvas notes for professionals book.