Drawing with Javascript

Many of the online learning environments use drawing as a lesson hook or activity. For instance, drawing flags at code.org, or a whole drawing and animation course at Khan Academy. This is not just native Javascript, these environments use libraries such as Processing.js - although it is a bit easier now with the HTML5 canvas.

So if you want to set up or explore your own examples, how do you go about it? You could certainly jump to the "free draw" sections of these other web sites, but what's actually "under the hood"? I've collected some links and notes here to help start to build knowledge about how to draw with Javascript.

• This fiddle uses an HTML5 canvas to draw a coloured rectangle: http://jsfiddle.net/levona/eA3xH/
• This fiddle uses the Raphael library to draw a plain rectangle: http://jsfiddle.net/brainwipe/M8mV7/1/
• This fiddle is titled "Processing 101" but is a little complex, it draws circles where you move the mouse: http://jsfiddle.net/ehsanziya/PwrSK/
• This five year old article is obviously dated but gives a rundown on three popular drawing frameworks: Paper.js, Processing.js and Raphael.js: https://www.smashingmagazine.com/2012/02/web-drawing-throwdown-paper-processing-raphael/
• HTML Canvas drawing with Javascript from W3Schools: https://www.w3schools.com/graphics/canvas_drawing.asp
• This is an interesting fiddle that draws a rectangle around a named region on a Google map: http://jsfiddle.net/petrabarus/dSwDj/
• p5js is a great library, and you can do some drawing very easily using, for instance, their alpha online editor: https://alpha.editor.p5js.org/