How to make the tank not go out of the canvas ? js

[RasuLcrose]

var tank;
function init() {
audio = new Audio("audio/audio.mp3");
audio.play();
myGame = new Game();
tank2 = new Tank (100, 100, 20, 20, "red");
tank = new Tank(100, 100, 20, 20, "red");
myGame.start();
}

function Game() {
self = this;
this.canvas = document.getElementById('MyCanvas');
this.context = this.canvas.getContext('2d');
key = false;
self.start = function () {
console.log("in start function")
setInterval(self.update, 20);
window.addEventListener('keydown', function (e) {
self.key = e.keyCode;
});
window.addEventListener('keyup', function (e) {
self.key = false;
});
}

self.update = function () {
console.log("in update function");
self.clear();
tank.stepX = 0;
tank.stepY = 0;
tank2.stepX = 0;
tank2.stepY = 0;
if (self.key == 37) {
tank.stepX--;
tank.angle = -90;
}
if (self.key == 38) {
tank.stepY--;
tank.angle = 0;
}
if (self.key == 39) {
tank.stepX++;
tank.angle = 90;
}
if (self.key == 40) {
tank.stepY++;
tank.angle = 180;
}
//tank 2
if (self.key == 83) {
tank2.stepX--;
tank2.angle = -90;
}
if (self.key == 87) {
tank2.stepY--;
tank2.angle = 65;
}
if (self.key == 68) {
tank2.stepX++;
tank2.angle = 90;
}
if (self.key == 97) {
tank2.stepY++;
tank2.angle = 1072;
}
tank.draw();
tank.pos();
tank2.draw();
tank2.pos();
}

self.clear = function () {
self.context.clearRect(0, 0, self.canvas.width, self.canvas.height);
}

}

function Tank(x, y, width, height, color) {
this.width = width;
this.height = height;
this.stepX = 0;
this.stepY = 0;
this.angle = 0;
this.x = x;
this.y = y;
this.img = new Image;
this.img.src = ("img/tanchik.png");
this.img.width = 30;
this.img.height = 30;
this.ima = new Image;
this.ima.src = ("img/tank.png");
this.pos = function () {
this.x += this.stepX;
this.y += this.stepY;
}

this.draw = function () {
this.rotateTank(this.img,this.x, this.y, this.angle,this.img.width, this.img.height);
}

this.rotateTank = function (image, x, y, angle, width, height) {
TO_RADIANS = Math.PI / 180;
myGame.context.save();
myGame.context.translate(x, y);
myGame.context.rotate(angle * TO_RADIANS);
//myGame.context.drawImage(,-(width / 2), -(height / 2), width, height);
myGame.context.drawImage(image, -(width / 2), -(height / 2), width, height);
myGame.context.restore();
}
}