Drawing on Canvas

Canvas is a blank rectangle you paint with code — the foundation of browser games, charts, and generative art.

canvas.getContext('2d')

1. 1Add the canvas

   Add a canvas element with a width and height.

   <canvas id="c" width="400" height="240"></canvas>

2. 2Get the context

   Grab the 2d drawing context in a script.

3. 3Draw a rectangle

   Set a fill colour and draw a rect.

4. 4Draw a circle

   Use arc() to draw a filled circle.