Canvas

[ajhsu]

Random notes

• Use width and height for <canvas> resize, don't use CSS otherwise it could be distorted.
• Provide fallback content for browsers don't support <canvas>

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 + 0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

• Telling the user to use a different browser that supports canvas does not help users who can't read the canvas at all, for example. Providing a useful fallback text or sub DOM helps to make the canvas more accessible.

• The angles in arc are measured in radians, not degrees, where radians = (Math.PI/180) * degrees

[ajhsu]

(Probably) Two way to deal with blurry lines

1. Shift for a half pixel to align the screen pixels.
2. Upscale to 2x resolution (like Retina Display), but it will also make the line even thinner.