<canvas id="myCanvas1" width="800">Your browser does not support the canvas tag.</canvas>

​

​

<script type="text/javascript">

    var canvas = document.querySelector('#myCanvas1');

    var ctx = canvas.getContext('2d');

    ctx.fillStyle = '#FF0000';

    ctx.fillRect(0, 0, 80, 100);

​

    ctx.shadowColor = "#bbbbbb";

    •

    ctx.shadowBlur = 5;

    ctx.shadowOffsetX = 15;

    ctx.shadowOffsetY = 15;

    ctx.fillRect(90, 0, 80, 100);

​

    var grd = ctx.createLinearGradient(0, 0, 290, 0);

    grd.addColorStop(0, "#8ED6FF");

    grd.addColorStop(0.5, "#FF0000");

    grd.addColorStop(1, "#004CB3");

    ctx.fillStyle = grd;

    ctx.fillRect(180, 0, 80, 100);

​

    var imageObj = new Image();

    imageObj.onload = function () {

        // Try to change the last parameter to repeat-x, repeat-y, or

        //no-repeat

        var pattern = ctx.createPattern(imageObj, "repeat");

​

        ctx.rect(270, 0, 80, 100);

        ctx.fillStyle = pattern;

        ctx.fill();

​

        // save current state of context

        ctx.save();

        ctx.translate(120, -55);

        ctx.rotate(0.2);

​

        ctx.beginPath();

        ctx.rect(270, 0, 80, 100);

        ctx.fill();

        ctx.closePath();

​

        ctx.restore();

​

        var x = 200, y = 130;

        ctx.font = "60pt Calibri";

        ctx.lineWidth = 3;

        ctx.strokeStyle = "blue";

        ctx.strokeText("Hello World!", x, y);

        ctx.fillStyle = "red";

        ctx.fillText("Hello World!", x, y);

        ctx.strokeStyle = "blue";

        ctx.strokeText("Hello World!", x, y);

​

    };

​

    imageObj.src = "http://www.html5canvastutorials.com/demos/tutorials/html5_canvas_patterns/wood-pattern.png";

​

</script>