Art 210: Rich Stick Man

Here is my project. It is a stick figure "rich guy", complete with a top hat, cane, and monocle. It took me a long time to complete this. Here is the HTML 5 Code:

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

context.beginPath();
context.rect(0, 0, 800, 600);
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
           grd.addColorStop(0, 'rgb(200, 50, 255)');
         grd.addColorStop(0.5, 'rgb(230, 150, 255)');
        grd.addColorStop(1, 'rgb(255, 255, 255)');

        context.fillStyle = grd;
        context.fill();

context.beginPath();
context.arc(425, 210, 100, 0, 2 * Math.PI, false);
        context.fillStyle = 'rgb(238, 204, 172)';
                context.fill();
        context.stroke();

context.beginPath();
        context.rect(325, 125, 210, 30);
        context.fillStyle = 'black';
        context.fill();
        context.stroke();

context.beginPath();
        context.rect(375, 50, 100, 90);
        context.fillStyle = 'black';
        context.fill();

context.beginPath();
context.arc(370, 193, 5, 0, 2 * Math.PI, false);
        context.fillStyle = 'black';
                context.fill();
        context.stroke();

context.beginPath();
context.arc(470, 193, 5, 0, 2 * Math.PI, false);
        context.fillStyle = 'black';
                context.fill();
        context.stroke();

context.beginPath();
context.arc(420, 223, 5, 0, 2 * Math.PI, false);
        context.fillStyle = 'black';
                context.fill();
        context.stroke();

        context.beginPath();
context.arc(470, 193, 15, 0, 2 * Math.PI, false);
        context.stroke();

          context.beginPath();
context.moveTo(470, 208);
context.lineTo(470, 225);
context.stroke();

context.beginPath();
        context.arc(420, 250, 40, 0, Math.PI, false);
        context.closePath();
        context.lineWidth = 5;
        context.fillStyle = 'red';
         context.fill();
        context.stroke();

context.beginPath();
context.moveTo(425,310);
context.lineTo(425,500);
context.stroke();

context.beginPath();
        context.moveTo(325, 600);
        context.quadraticCurveTo(425, 400, 525, 600);
   context.stroke();


     context.beginPath();
context.moveTo(575,390);
context.lineTo(275,390);
context.stroke();

context.beginPath();
       context.moveTo(550, 600);
        context.bezierCurveTo(490, 400, 575, 400, 575, 390);
        context.strokeStyle = 'rgb(139, 90, 43)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Art 210

Tuesday, September 18, 2012

Rich Stick Man

No comments:

Post a Comment