canvas transformations

Translation of canvas

<!DOCTYPE html>

<html>
    <head>
        <title>Canvas from scratch</title>
        <meta charset="utf-8">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

        <script>
            $(document).ready(function() {
                var canvas = document.getElementById("myCanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillRect(0, 0, 100, 100);
                ctx.save();
                ctx.translate(100, 100);
                ctx.fillStyle = "rgb(0, 0, 255)";
                ctx.fillRect(0, 0, 100, 100);
                ctx.restore();

            });
        </script>
    </head>

    <body>
        <canvas id="myCanvas" width="500" height="500">
            <!-- Insert fallback content here -->
        </canvas>
    </body>
</html>

Try scaling by

               ctx.fillRect(100, 100, 100, 100);  
                ctx.save();  
                ctx.scale(2, 2);  
                ctx.fillRect(100, 100, 100, 100);  
                ctx.restore();

Try scaling and translation by :

                ctx.save();  
                ctx.translate(100, 100);  
                ctx.scale(2, 2);  
                ctx.fillRect(0, 0, 100, 100);  
                ctx.restore();
var $ctx = $( '<canvas />', {width:'100', height:'100'} )
$widget.append($ctx)     
$ctx is a jQuery object. use $ctx[0].getContext('2d') to get the context

we can create the rotate ,shadow,gradient.

Ref:

http://net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-transformations-and-gradients/

html 5 functions :

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#2dcontext

Nice cheat sheet :

http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

Nice explanation of canavas element Defination.

http://en.wikipedia.org/wiki/Canvas_element

http://stackoverflow.com/questions/3239680/jquery-dynamic-canvas-creation-ctx-getcontext-is-not-a-function

Advertisements

About rahul23134654

Hi, I am Rahul Meha , B.E. in (I.T.)
This entry was posted in HTML, UI Js. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s