wrapText - HTML5 - javascript

function wrapText(context, text, x, y, maxWidth, lineHeight) {
//manage carriage return
 text = text.replace(/(\r\n|\n\r|\r|\n)/g, "\n");
//manage tabulation
text = text.replace(/(\t)/g, " "); // anything you want
//array of lines
var sections = text.split("\n");

for (s = 0, len = sections.length; s < len; s++) {
var words = sections[s].split(' ');
var line = '';

for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
} else {
line = testLine;
}
}
context.fillText(line, x, y);

//new line for new section of the text
y += lineHeight;
}
};


Cara memanggil:
var maxWidth = 300; // lebar area teks
var lineHeight = 20; // tinggi teks
var str = 'teks panjang  yang akan dijadikan beberapa baris'
wrapText(context, str, 0, 0, maxWidth, lineHeight);


sumber:
http://stackoverflow.com/questions/15582937/vertical-align-text-on-html-5-canvas

Resize Canvas - html5

function getViewport() {
var viewPortWidth;
var viewPortHeight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewPortWidth = window.innerWidth,
viewPortHeight = window.innerHeight;
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'&& typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0) {
viewPortWidth = document.documentElement.clientWidth,
viewPortHeight = document.documentElement.clientHeight
}

// older versions of IE
else {
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
}

return [viewPortWidth, viewPortHeight];
}

function resize_canvas(){
var t = getViewport();

innerWidth = t[0];//window.innerWidth;
innerHeight = t[1];//window.innerHeight;

sizeDiffW = innerWidth-canvasWidth;
sizeDiffH = innerHeight-canvasHeight;
chkscaleW = innerWidth/canvasWidth;
chkscaleH = innerHeight/canvasHeight;
scaleFix = Math.min(chkscaleW,chkscaleH);

canvas.width=canvasWidth*scaleFix;
canvas.height=canvasHeight*scaleFix;
context.scale(scaleFix, scaleFix);

canvas.style.left="100px";
canvas.style.top="100px";
canvas.style.marginLeft="100px";
canvas.style.marginTop="100px";

canvas.style.left=((innerWidth-canvasWidth*scaleFix)/2)+"px";
canvas.style.top=((innerHeight-canvasHeight*scaleFix)/2)+"px";

canvas.style.marginLeft=""+((innerWidth-canvasWidth*scaleFix)/2)+"px";
canvas.style.marginTop=""+((innerHeight-canvasHeight*scaleFix)/2)+"px";

}


sumber:
http://stackoverflow.com/questions/1766861/find-the-exact-height-and-width-of-the-viewport-in-a-cross-browser-way-no-proto

Stage.displayState = 'fullScreen'

Dengan ActionScript 2.0

fullscreen:
Stage.displayState="fullScreen";

normal:
Stage.displayState="normal";

Sumber:
http://permadi.com/tutorial/flash9FullScreen/index.html