Tuesday, June 5, 2012

Tuesday, May 29, 2012


Finished Project




 http://media.comicvine.com/uploads/2/23721/558157-ion_super.jpg
 http://www.rocketroberts.com/astro/images/dx-18p.jpg


<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
//////
        var imageObj = new Image();
        imageObj.onload = function() {
          var pattern = context.createPattern(imageObj, "repeat");

          context.rect(0, 0, canvas.width , canvas.height);
          context.fillStyle = pattern;
          context.fill();
///////


var startX= 200;
var startY= 100;

var start2X= 200;
var start2Y= 800;


context.beginPath();
context.rect(startX, startY, 600, 100);
var grd = context.createLinearGradient(0, 200, 0, 100);
        // green
        grd.addColorStop(0, "green");
        // black
        grd.addColorStop(1, "black");
        context.fillStyle = grd;
        context.fill();
context.closePath();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.rect(start2X, start2Y, 600, 100);
var grd = context.createLinearGradient(0, 800, 0,900);
        // light blue
        grd.addColorStop(0, "green");
        // dark blue
        grd.addColorStop(1, "black");
        context.fillStyle = grd;
        context.fill();
context.closePath();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
   
var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 300;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "green";
        context.stroke();

var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = pattern;
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
var x = 400;
        var y = 325;
        var width = 200;
        var height = 350;
var imageObjgl = new Image();

        imageObjgl.onload = function() {
          context.drawImage(imageObjgl,x,y, width, height);
        };
        imageObjgl.src = "http://media.comicvine.com/uploads/2/23721/558157-ion_super.jpg";
     
        };
        imageObj.src = "http://www.rocketroberts.com/astro/images/dx-18p.jpg";
      };

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