Drawing app

by ElijahCirioli

HTML

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

CSS

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

JavaScript

/*************
variables to make program work
*************/
//access the canvas
var canvas = document.getElementById('myCanvas');
//access drawing environment
var context = canvas.getContext("2d");

var x = 240;
var y = 240;
var XSpeed = 0;
var YSpeed = 0;
var speedMult = 1;

/***********
function for drawing stuff
************/
function draw() {
  //background
  context.fillStyle = "lightBlue";
  context.fillRect(0, 0, 500, 500);
  //Cubeman 
  context.fillStyle = "white";
  context.fillRect(x, y, 20, 20);
  
  
  //Everything involving keys
  document.onkeydown = function(e) {
      var e = window.event || e;
      var key = e.keyCode;
      e.preventDefault();

      //key inputs
      if (key === 39 && x < 477) {
        XSpeed = 3;
        YSpeed = 0;
      }
      if (key === 37 && x > 3) {
        XSpeed = -3;
        YSpeed = 0;
      } 
      if (key === 38 && y > 3) {
        YSpeed = -3;
        XSpeed = 0;
      }
      if (key === 40 && y < 477) {
        YSpeed = 3;
        XSpeed = 0;
      }       
      if (key === 32 && speedMult < 9) {
      	speedMult = speedMult + 1;
      }
	}
  
  		//MOVEMENT
			x = x + (XSpeed * speedMult);
      y = y + (YSpeed * speedMult);
      
      //Checking for Collision
      if (x > 477 || x < 3) {
      XSpeed = 0;
      } else if (y > 477 || y < 3) {
      YSpeed = 0;
      }
}
    /************
    Call the function
    ************/
  var framerate = 1000 / 30;
  var thread = setInterval(draw, framerate);