This is the result of this tutorial:
The example is simple and use two ways to draw text.
First use a function how make the text by using index variable to put on canvas same text.
The next use function strokeText to add to canvas the text.
The onload function is used to put on canvas all you need to see.
This is the source code for java script I used into
head HTML5 tag :
window.onload = function(){
var canvas = document.getElementById("3dCanvas");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext("2d");
ctx.font = "20pt Verdana";
ctx.fillStyle = "black";
ctx.textAlign = "center";
// first
drawTextInCanvas(ctx , "graphic-3d.blogspot.com", canvasWidth/2, canvasHeight/2, 4);
// the next
ctx.strokeText('... read this website !', 150, 150);
};
function drawTextInCanvas(ctx, mytext, wdth, hght, dpth){
var index;
for (index = 0; index < dpth; index++) {
ctx.fillText(mytext, wdth - index, hght - index);
}
// shadow casting in bottom layers
ctx.fillStyle = "#30F30F";
ctx.shadowColor = "black";
ctx.shadowBlur = 6;
ctx.shadowOffsetX = dpth+ 2;
ctx.shadowOffsetY = dpth+ 2;
ctx.fillText(mytext, wdth - index, hght - index);
}
Then add the
canvas tag into
body tag with this :
id="3dCanvas" width="400" height="200" style="border:1px solid black;"
