Cutting out rounded rectangle from canvas in JavaScript

In JavaScript, you can easily cut out rounded rectangle from existing canvas drawings, using the combination of the two technics; drawing a rounded rectangle and globalCompositionOperation = 'destination-in'.

First, you draw anything you want on any position of the canvas, then set the canvas context's globalCompositionOperation property to 'destination-in' and then fill rounded rectangle using above technic and you get rounded version of your image :)

The following function cut out rounded rectangle with given left, top, width and height and rounding radius on given canvas context.

var cutRoundedRect = function(ctx, radius, x, y, w, h) {
    var left = x;
    var top = y;
    var right = x + w;
    var bottom = y + h;

    ctx.globalCompositeOperation = 'destination-in';
    ctx.fillStyle = 'black';

    ctx.beginPath();
    ctx.moveTo(left + radius, top);
    ctx.lineTo(right - radius, top);
    ctx.quadraticCurveTo(right, top, right, top + radius);
    ctx.lineTo(right, bottom - radius);
    ctx.quadraticCurveTo(right, bottom, right - radius, bottom);
    ctx.lineTo(left + radius, bottom);
    ctx.quadraticCurveTo(left, bottom, left, bottom - radius);
    ctx.lineTo(left, top + radius);
    ctx.quadraticCurveTo(left, top, left + radius, top);
    ctx.fill();
};

URL を QR コードに変換する Bookmarklet + CSS3 animation.

今開いているページの URL を QR コードに変換したものを
そのページ内に画像として挿入するブックマークレットを作成しました。
挿入時のアニメーションに CSS3 を使っています。
chrome 14.0.835.186, firefox 6.0.2, safari 5.1 で動作確認。
ブックマークバーなんかに登録して使うと使いやすいかと思います。

QR! <- これをブックマークに登録

(function(){
  var size=150;
  var t0=50;
  var t1=32;
  var img=document.createElement('img');
  img.src='http://chart.apis.google.com/chart?cht=qr&chs='+size+'x'+size+'&choe=UTF-8&chld=H&chl='+encodeURIComponent(location.href);
  var s=img.style;
  s.opacity=0;
  s.position='absolute';
  s.top=''+(pageYOffset+t1)+'px';
  s.left=''+(-t0)+'px';
  s.zIndex=9999;
  s.boxShadow='1px 1px 5px black';
  s.borderRadius='0 15px 15px 0';
  s.webkitTransition='0.3s linear';
  s.MozTransition='0.3s linear';
  img.onclick=function(){
    s.opacity=0;
    s.left=''+(-t0)+'px';
    setTimeout(function(){
      document.body.removeChild(img);
    },1000);
  };
  document.body.appendChild(img);
  setTimeout(function(){
    s.left='0px';
    s.opacity=0.9;
  },30);
})();

やっている事としては、<img /> タグの dom を作って、
src に google chart api の
QR の api のアドレスを代入して、まず画像を作ります。
それのスタイルをいろいろ設定した後、
body に appendChild します。
body に append した後で、left と opacity を再度代入する事で、
CSS3 transition が効くので animation して img が出現します。
img の onclick に逆のスタイル変更を設定しおけば、消えるときは逆の
アニメーションで消えていきます。
アニメーションで消えた後、ちょっと間をおいて、
body から removeChild する事で、GC 対象になるように
しています。
size とか t1 変数の値を変更する事で、見た目のサイズとか、出現位置を変更できます。
size = QRコードのサイズ
t1 = 画像の出現位置、画面の上からの距離 (px単位)

HTML5 Web Sql Database に使われている Sqlite のバージョンを調べるワンライナー

openDatabase(1,1,1,1).transaction(function(t){t.executeSql("select sqlite_version()a",[],function(t,r){alert(r.rows.item(0).a);})});

たとえば、Google Chrome 13.0.782.220 m というバージョンだと、Sqlite は 3.7.6.3 というバージョンらしい・・・