HTML5

canvas – viewport

– when you’re manipulating canvas, you’re not manipulating the dom.

– cartician coordinate system. (0,0)

(0,0) 1     2     3      4      5      6

1          
2          
3          
4          
5          
6          

 

default size of canvas – 150px tall 300px wide

2d rendering platform – array of pixels

<!DOCTYPE html>

<html>
    <head>
        <title></title>
        <script>
            var c = null; // these two vars are global variable
            var ctx = null;
            window.onload = function(){
                c = document.getElementById(“mycanvas”);
                ctx = c.getContext(“2d”);
                ctx.fillStyle = “red”; // you can use either hexa, rgb or plain words
                ctx.fillRect(10,10,50,50); // takes on four(4) arguments(x,y,width,height)
                ctx.fillStyle = “green”; // you can use either hexa, rgb or plain words
                ctx.fillRect(10,70,50,50); // takes on four(4) arguments(x,y,width,height)
                ctx.lineWidth = 3;
                ctx.strokeStyle = “orange”; // you can use either hexa, rgb or plain words
                ctx.strokeRect(80,10,50,50); // takes on four(4) arguments(x,y,width,height)
                ctx.fillStyle =”#000000″;
                ctx.font = “Italic 50px serif”;
                ctx.fillText(“Hello”, 90,45) // it accepts three(3) arguments
                ctx.fillStyle =”#000000″;
                ctx.font = “Italic 50px serif”;
                ctx.fillText(“Hello”, 90,45) // it accepts three(3) arguments
                ctx.strokeText(“Hello”, 90,45) // it accepts three(3) arguments
                ctx.beginPath();
                ctx.moveTo(10,130);
                ctx.lineTo(10,300);
                ctx.closePath();
                ctx.stroke();
            }
            function getdim(){           
                alert(“Width = ” + c.width + “Height = ” + c.height);               
            }
        </script>
    </head>
    <body>
        <canvas id=”mycanvas” width=500 height=400 style=”border: 2px solid green;”></canvas>       
        <p>
        <input type=button value=”Canvas dim” onclick=”getdim()”>
    </body>

</html>

 

ONMOUSEMOVE FUNCTION OF THE CANVASS OBJECT

 

<!DOCTYPE html>

<html>
    <head>
        <title>THIS IS FILE IS FOR MOUSEPOS REFERENCE</title>
        <script>
            var c = null;
            var cx = null;
            var output = null;
            window.onload = function(){
                c = document.getElementById(“mycanvas”);
                cx = c.getContext(“2d”);
                output = document.getElementById(“output”);
                c.onmousemove = function(){               
                    output.innerHTML = “X : ” + event.clientX + ” | Y: ” + event.clientY;
                    cx.fillStyle = “rgb(255,0,0)”;
                    cx.fillRect(event.clientX,event.clientY,10,20);               
                }
            }
            function clearall(){               
                cx.clearRect(0,0,c.width,c.height);           
            }
        </script>
    </head>
    <body>
        <input type=button value=”clear” onclick=”clearall()”>
        <p>
        <canvas id=”mycanvas” width=”300″ height=”300″ style=”border:1px dotted gray”>
        </canvas>
        <div id=”output”>
        </div>
    </body>

</html>

Advertisements

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