Canvas Console

var canvas=document.getElementById('theCanvas');
var context=canvas.getContext('2d');

Type your canvas code in the editor then click Draw It!

Reference - canvas functions and properties

Click the code to add it to the console

Styles

Set the fillStyle: context.fillStyle="color"
Set the strokeStyle: context.strokeStyle="color"
line widths: context.lineWidth=number
line join styles: context.lineJoin="style" (bevel, round, miter)
line end styles: context.lineCap="style" (butt, round, square)

Rectangles

Draw a rectangle: context.strokeRect(left, top, width, height)
fill a rectangle: context.fillRect(left, top, width, height)
erase a rectangle: context.clearRect(left, top, width, height)

paths

begin a path: context.beginPath
complete a path: context.closePath
move the pen to a location: context.moveTo(horizontal, vertical)
draw a straight line from current pen location to a new location: context.lineTo(horizontal, vertical)
stroke the current path: context.stroke()
fill the current path: context.fill()

Text

set the font: context.font="bold italic size font-family"
set the alignment: context.textAlign="left right center"
fill some text: context.fillText("string to fill", top, left)
stroke some text: context.strokeText("string to stroke", top, left)

Shadows

shadow color: context.shadowColor="color"
shadow horizontal offset: context.shadowOffsetX=number
shadow vertical offset: context.shadowOffsetY=number
shadow blur: context.shadowBlur=number