Canvas specific Golfing Tricks

Clearing the canvas

Simply: c.width|=0

"There's a difference there too, clearRect only clears the pixels, while setting the width of height of the canvas clears all the other state too, like fillStyle, transforms, etc" - sigveseb

In fact you can | with various small numbers with little or no consequence, so this clearing can be combined with other variable setup: c.width|=N=600

Set canvas width to 300: c.width=-1

Color

You can get hsl using a template string, and you can omit the final ')' because browsers are lenient when parsing it:

x.fillStyle=`hsl(${X},80%,${i}%`

Text instead of rects?

It is shorter to draw text than to fill a rectangle (if your w and h are more than 1 char each). So instead of little dots, you could consider little unicodes.

x.fillRect(x,y,w,h);
x.fillText('O',x,y);

Other

x.fill('evenodd') is significantly shorter than x.globalCompositeOperation='xor';x.fill()

If you are using color, using the alpha from hsla(... is usually shorter than a separate x.globalAlpha=0.5

Are you put off using x.transform() because it doesn't reset. Try x.setTransform() instead! But note that it is different: it takes a matrix rather than a string of transforms.

Setting font size

// Long ways:
x.font='99px sans'
x.font='99px sa'

// Short way
x.font='9em"'
x.font="9em'"

Note that on Mac OS X, 256em seems to be the maximum. After that, text and emoji just disappear!

Canvas effects

x.shadowBlur=20;x.shadowColor="#000"