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();
};

new and not new

x() instanceof x と new x() instanceof x を同時に満たすような x の作り方。

var x = (function () {
    var constructor = function (args) {
        /* constructor */
    };

    /* other definitions */

    var exports = function (args) {
        return new constructor(args);
    };

    constructor.prototype.constructor = exports;
    exports.prototype = constructor.prototype;

    return exports;
}());

とやると、x() instanceof x && new x() instanceof x となる。

jQuery も似たような事やってる。https://github.com/jquery/jquery/blob/master/src/core.js

メモ: javascrpt で qrcode 生成

jquery.qrcode.js

http://jeromeetienne.github.com/jquery-qrcode/

QR Code Generator

http://www.d-project.com/qrcode/index.html

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 というバージョンらしい・・・