fill a closed polygon using current fill() options
bezier using control points cx0,cy0 and cx1,cy1 to x,y
draw line from current vertex to x, y
unproject from screen to world space
I suggest switching youtube into 480p mode by clicking on the bottom where it says 360p and then going into full screen mode.
draw image loaded from url at x, y with (w)idth and (h)eight sampling from sx,sy with width sw and height sh
size the canvas to (w)idth and (h)eight
Community programming — easy to learn from and help others.
arc center (x,y) with (r)adius from angle a0 to a1 with antiClock flag
linear gradient from (x0,y0) to (x1,y1)
x position of mouse (top left = 0,0)
draw a line from (x0,y0) to (x1,y1)
y position of mouse (top left = 0,0)
draw shadows at offset x,y with blur and color r,g,b
distance between points (x0,y0) and (x1,y1)
set text alignment leftrightcenter and baseline tophangingmiddlealphabeticbottom
add a color p percent along the gradient with color (r,g,b)
This panel lets you browse and add art that may be used by your programs.
draw a filled rect from x, y with (w)idth and (h)eight
returns down key or null. (Note, only one key can be down at a time)
vertical center of canvas (height / 2)
… a site to learn to program games in Javascript.
draw with a fill of (r)ed, (g)reen, (b)lue, and (a)lpha
radial gradient from (x0,y0) radius r0 to (x1,y1) radius r1
Tutorial 2: Variables and animation
For example, you might upload a picture call it ball and then use the image(ball) call on the code panel.
quadratic curve using control point cx, cy to x, y
draw image loaded from url at x, y with (w)idth and (h)eight
arc center (x,y) with (r)adius from angle a0-a1 with anticlockwise spin c (boolean)
set line stroke to (w)idth, (r)ed, (g)reen, (b)lue, and (a)lpha with cap=buttsquareround and join=roundbevelmiter
draw circle centered at x, y with radius r using fill
Note, these videos were taken with a previous version of Happy Fun Coding. The screen layout has changed somewhat. The main content of the videos is unchanged.
horizontal center od canvas (width / 2)
Embed your creations on your own web pages.
pathArc(x,y,r,a0,a1,antiClock=false)
stroke(w=1, r=0, g=0, b=0, a=1, cap=butt, join=miter)
Tutorial 13: An example putting it all together
draw circle centered at x, y with radius r using stroke
set the viewport to upper-left (x0,y0) and lower-right (x1,y1). Note, scales stroke appropriately.
close a path (forms a closed polygon)
draw a box outline from x, y with (w)idth and (h)eight
stroke along the path using current stroke() options
Hover over the name of a program to see a preview