i had done shirt in javascript

Discussion in 'JavaScript' started by ayushi infotech, Jul 21, 2011.

0
  1. #1
    hi friends

    i had done shirt in javascript using html5 canvas friend please tell me any interesting website about learn html5 canvas.....

    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    canvas {
    background-color:#eee;
    }
    </style>
    <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <script language="JavaScript">
    function drawShape(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(90,50);
    ctx.lineTo(75,60);
    ctx.lineTo(70,210);
    ctx.lineTo(90,210);
    ctx.lineTo(100,170);
    ctx.lineTo(100,150);
    ctx.lineTo(100,210);
    ctx.lineTo(95,225);
    ctx.lineTo(120,245);
    ctx.lineTo(120,245);
    ctx.lineTo(190,243);
    ctx.lineTo(200,220);
    ctx.lineTo(195,160);
    ctx.lineTo(200,130);
    ctx.lineTo(200,160);
    ctx.lineTo(205,180);
    ctx.lineTo(205,200);
    ctx.lineTo(210,210);
    ctx.lineTo(210,230);
    ctx.lineTo(230,230);
    ctx.lineTo(230,210);
    ctx.lineTo(230,180);
    ctx.lineTo(230,160);
    ctx.lineTo(230,140);
    ctx.lineTo(228,100);
    ctx.lineTo(222,60);
    ctx.lineTo(212,50);
    ctx.lineTo(180,40);
    ctx.lineTo(170,30);
    ctx.lineTo(165,25);
    ctx.lineTo(155,25);
    ctx.lineTo(145,25);
    ctx.lineTo(135,25);
    ctx.lineTo(125,25);
    ctx.lineTo(115,40);
    ctx.lineTo(100,45);
    ctx.lineTo(90,50);
    ctx.closePath();
    ctx.fillStyle = "rgb(220,150,120)";
    ctx.fill();
    ctx.strokeStyle ="black";
    ctx.lineWidth=1;
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(125,15);
    ctx.lineTo(165,15);
    ctx.lineTo(185,40);
    ctx.lineTo(175,35);
    ctx.lineTo(165,30);
    ctx.lineTo(145,30);
    ctx.lineTo(135,30);
    ctx.lineTo(128,30);
    ctx.lineTo(118,40);
    ctx.lineTo(108,48);
    ctx.lineTo(118,30);
    ctx.lineTo(122,20);
    ctx.lineTo(125,15);
    ctx.closePath();
    ctx.fillStyle = "rgb(230,100,100)";
    ctx.fill();
    ctx.strokeStyle ="black";
    ctx.lineWidth=1;
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(155,80);
    ctx.lineTo(155,185);
    ctx.lineTo(155,235);
    ctx.lineTo(140,235);
    ctx.lineTo(142,185);
    ctx.lineTo(142,50);
    ctx.lineTo(155,50);
    ctx.lineTo(155,90);
    ctx.closePath();
    ctx.fillStyle = "rgb(20,100,100)";
    ctx.fill();
    ctx.strokeStyle ="black";
    ctx.lineWidth=1;
    ctx.stroke();



    }
    </script>

    </head>
    <body onload="drawShape();">
    <canvas id="myCanvas" width="578" height="470" style="border: 1px solid red;">I'm old internet explore </canvas>
    </body>
    </html>
     
    ayushi infotech, Jul 21, 2011 IP