function boot() {
draw(document.getElementById('canvas').getContext('2d'));
draw(document.getElementById('vmlcanvas').getContext('2d'));
}
function draw(ctx) {
var w = 500, h = 250;
// var fillText = "textAlign आ 私達";
var fillText = "textBaseline 私達";
grid(ctx, w, h, 10, 5, "SkyBlue", "steelblue");
// setting
ctx.font = "48pt Arial";
ctx.fillStyle = "green";
ctx.textBaseline = "top";
ctx.fillText(fillText, 0, 100);
ctx.strokeStyle = "red";
var dim = ctx.measureText(fillText);
ctx.strokeRect(0, 100, dim.width, dim.height || 75);
}
function grid(ctx, w, h, size, unit, color, color2) {
var x, y, i, j;
for (i = 0, x = size; x < w; ++i, x += size) {
ctx.beginPath();
ctx.strokeStyle = (i % unit) ? color : color2;
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
ctx.stroke();
ctx.closePath();
}
for (j = 0, y = size; y < h; ++j, y += size) {
ctx.beginPath();
ctx.strokeStyle = (j % unit) ? color : color2;
ctx.moveTo(0, y);
ctx.lineTo(w, y);
ctx.stroke();
ctx.closePath();
}
}