canvasでドロップシャドウ

Widgetの輪郭を計算してグラデーションとドロップシャドウをcanvas要素にレンダリングさせる方法を思いついた。この方法なら特別な画像編集アプリケーションは必要ないし、スライスした画像をパズルのように繋がずとも少ないリソースでフレキシブルなWidgetが作成できる。
難点は、canvas要素の原始的なcontextでWidgetのサイズから逆算しながら全てのパスやグラデーションの面倒見る必要があること。ひょっとしたらSVGサポートを待った方が早いかも。

バッドノウハウ

• canvas要素のサイズ変更はwidth/heightを直接触るのではなくsetAttributeで。
  • 参考：ブラウザ上でお絵かき: Days on the Moon
  • CSSでwidth:autoとかは無理。
• context.shadowColorはアルファが無視される。
• グラデーションとドロップシャドウを同時には使えない。
  • globalAlphaが0.5のcontextにべた塗りのシェイプでドロップシャドウを落として、globalAlphaを1.0に戻した上にグラデーションの本体を乗っける。
• Defaultイメージはグラブで作成。取り込みのダイアログはDashboardを立ち上げても有効なので、普通に初期状態のWidgetを撮影。

余談

乱暴にリサイズするとAppleInfoButtonがmouseoutイベント周りで無限ループに突入するっぽい。対処法は見つけられず。