Drawing app

by Kyle Bezio

HTML

<canvas width="500" height="500" id="myCanvas"></canvas>

CSS

#myCanvas {
    border:5px solid #000;
}

JavaScript

/*************
variables to make program work
*************/
//access the canvas
var canvas = document.getElementById('myCanvas');
//access drawing environment
var context = canvas.getContext("2d");
//the image object
var pig = new Image();
pig.src = "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=75014304";
//text box variables
var rectX = 165;
var rectY = 300;
var rectSizeX = 170;
var rectSizeY = 50;
//

/***********
function for drawing stuff
************/
function draw() {
		//draw the image
    context.drawImage(pig, 0, -25, 500, 540);
		//shapes  
    context.fillStyle = "blue";
    context.fillRect(0, 0, 100, 100);
    context.fillRect(400, 0, 100, 100)
    //text box
    context.fillStyle = "red";
    context.fillRect(rectX, rectY, rectSizeX, rectSizeY);
    //text
		context. fillStyle = "black";
    context.font = "40px Trebutchet";
    context.fillText("It's a Pig!", 175, 338);
		context.font = "20px Calibri";
    context.fillText("shape", 10, 10);
    //text box movement
    if (rectX >= 165){
		rectX = rectX - 1;
    rectY = rectY - 1;
    rectSizeX = rectSizeX + 2;
    rectSizeY = rectSizeY + 2;
		} else if (rectX < 145){    
    rectX = rectX + 1;
    rectY = rectY + 1;
    rectSizeX = rectSizeX - 2;
    rectSizeY = rectSizeY - 2;
    } else {
    if (rectX = 145){
    rectX = rectX - 1;
    rectY = rectY - 1;
    rectSizeX = rectSizeX + 2;
    rectSizeY = rectSizeY + 2;
    }
  }
}
/************
Call the function
************/
var framerate = 1000/30;
var thread = setInterval(draw, framerate);