JavaScript - Canvas Makes Strange Lines.

function GenericFigure(context) {
	this.states = ["wait", "moving", "rotating", "stop"];
	this.state = this.states[0];
	this.ctx = context;
	this.sqrW = this.sqrH = 20;
	this.ctxW = 200;
	this.ctxH = 350;
	
	this.colorsO = {
		red : "#ee1515",
		green : "#45d137",
		blue : "#17a3f3",
		orange : "#ff910f",
		purple : "#680077"
	};
	
	this.colorsA = ["#ee1515", "#45d137", "#17a3f3", "#ff910f", "#680077"];
	
	this.pickColor = function() {
		var num = Math.floor(Math.random() * 5);
		return this.colorsA[num];
	}
}

function Rectangle(context) {
	this.inheritFrom = GenericFigure;
	this.inheritFrom(context);
	this.width = this.sqrW;
	this.height = this.sqrH * 3;	
	this.x = this.ctxW / 2;
	this.y = 0;
	this.rotation = -1;
	
	this.setRotation = function(angle) {
		this.rotation = angle;
	}
	
	this.rotate = function() {
		this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
		this.ctx.translate(this.x + 2 * this.width, this.y - 2 * this.height + 20);
		this.ctx.rotate(this.rotation * Math.PI / 180);
		this.ctx.fillRect(this.ctxW / 2, 0, this.width, this.height);
		this.ctx.restore();
	}
	
	this.moveDown = function() {
		this.y += 20;
		this.ctx.restore();
		this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
		this.ctx.fillRect(this.x, this.y, this.width, this.height);
		this.ctx.save();
		
		if(this.rotation > -1) {
			this.rotate();
		}
		l("A");
	}
		
	this.draw = function() {
		this.ctx.fillStyle = this.pickColor();
		this.ctx.save();
		this.ctx.fillRect(this.x, this.y, this.width, this.height);
	}
}

//a tak można wywołać:

var ctx = document.getElementById("game").getContext("2d");
var rect = new Rectangle(ctx);				
      rect.draw();
				
      var inte = setInterval(function(){if(rect.y >= rect.ctxH - rect.height){clearInterval(inte);return;}if(rect.y == 60) rect.setRotation(90);rect.moveDown();}, 500);

this.ctx.translate(this.x, 0);

var birdr = new Image();
var birdl = new Image();

$(document).ready(function(){

if(Modernizr.canvas){
   var c = document.createElement('canvas');

   LK.animLoad();

   document.getElementById('backg-canvas').appendChild(c);

   $('canvas').attr({'width':'500','height':'500','id':'canvas'}); 

   var context = LK.returnCanvas();
   context.drawImage(birdl, 400,487,10,10);
}


});

var LK = {
	birdx: 400, //unused (lets just get it to draw the image first :\)
	birdy: 487, //unused
	animLoad: function(){
		birdl.src = "images/bird2.png";
		birdr.src = "images/bird.png";
		//alert(birdl);
		//alert(birdr);
	},
	returnCanvas: function(ca){
		var b_canvas = LK.getCanvas();
		var b_context = b_canvas.getContext('2d');
		return b_context;
	},
	getCanvas: function(){
		var a_canvas = document.getElementById('canvas');
		//alert(a_canvas);
		return a_canvas;
	}

}

<form>
  <input  id="a" size=4 name="neg" placeholder="1st Screen size in inch">
  <input  id="b" size=4 name="hoyr" placeholder="2nd Screen size in inch">
  <input type="submit" value="GO!" onclick="getValue()">
</form>
</div>


<canvas id="MyCanvas" width="1000" height="1000"></canvas>

<script type="text/javascript">
function getValue()
{
	var x = document.getElementById("a").value;
    var y = document.getElementById("b").value;

var aWidth;
var aHeight;
var bWidth;
var bHeight;


var c= document.getElementById("MyCanvas");
var ctx= c.getContext("2d");

ctx.fillStyle="#4AA02C";
ctx.fillRect(0,0,x,y);
}

function Canvas(DOMID, F)
{
this.Frame =   null;
this.width =  null;
this.height =  null;
this.zoom =   null;
this.DOM =	null;
this.ctx =   null;
this.offset =  null;
 
//Constructor
 
this.init = function(DOMID, F)
{
  this.DOM =   document.getElementById(DOMID);
  this.width =  $(this.DOM).width();
  this.height =  $(this.DOM).height();
  this.ctx =  this.DOM.getContext("2d");
  this.zoom =  1;
  this.offset =  {x:0,y:0};
  if(F != null)
   this.setFrame(F);
 
  this.onReady();
}
 
//Modifiers
 
this.draw =   function()
{
  //this.ctx.drawImage(image, 0, 0);
  this.ctx.beginPath();
  this.ctx.fillStyle = "#ffffff";
  this.ctx.rect(0,0,100,100);
  this.ctx.closePath();
  this.ctx.fill();
}
this.setFrame =  function(F)
{
  this.Frame = F;
}
//Events
 
this.onReady = function(){}
 
this.init(DOMID, F);
}

window.goToCanvas = function()
{
  clearTimeout(playInterval);
  playInterval = setInterval("drawCurrentCanvas()", window.playSpeed);
}
 
window.drawCurrentCanvas = function()
{
  index = window.canvasIndex;
  canvases[index].draw();
}

var shoreline = new Array();
var waves = new Array();
var canWidth = 600;
var canHeight = 400;
var waveNum = 0;
var count = 0;

function wave() {
	setupShore();
	var canvas = document.getElementById("canvas");
	canvas.setAttribute("width",canWidth);
	canvas.setAttribute("height",canHeight);
	var ctx = canvas.getContext("2d");
	createWave();
	setInterval(update(ctx), 1000);
}
	
function update(ctx) {
	if(waves.length != 0) {
		drawWater(ctx);
		drawShore(ctx);
		drawWaves(ctx);
		updateWaves();	
	}
}

function drawElement(ctx, x, y, width, height, fillcolor) {
	ctx.fillStyle = fillcolor;
	ctx.fillRect(x, y, width, height);
}

function setupShore() {
	for(var i = 0; i <= canWidth/5; i++) {
		shoreline[i] = Math.round(canHeight/5); // + Math.floor(Math.random()*101);
	}
}

function createWave() {
	/*	Wave array setup:
		[ [waveID1, [node1, node2, ..., nodeN]], 
		[waveID2, [node1, node2, ..., nodeN] ] */
	waves.push([waveNum, []]);
	for(var c = 0; c <= canWidth/5; c++){
		waves[waves.length-1][1].push(canHeight);
	}
	waveNum = waveNum + 1;
}

function destroyWave() {
	waves.shift();
}

function drawWater(ctx) {
	drawElement(ctx, 0, 0, canWidth, canHeight, "#336699");
}

function drawShore(ctx) {
	for(var s = 0; s <= shoreline.length; s++) {
		drawElement(ctx, s*5, 0, 5, shoreline[s], "#FFCC00");
	}
}

function updateWaves() {
	for(var u = 0; u < waves.length; u++) {
		var limit = waves[u][1].length;
		for(var v = 0; v < limit; v++){
			var temp = waves[u][1][v]-5;
			waves[u][1][v] = temp;
			if(waves[u][1][v] <= shoreline[v]){
				destroyWave();
			}
		}
	}
}

function drawWaves(ctx) {
	for(var w = 0; w < waves.length; w++) {
		for(var n = 0; n <= waves[w][1].length; n++){
			y = waves[w][1][n];
			drawElement(ctx, n*5, y, 5, 5, "Purple");
		}
	}
}

<html>
<head>
<script type="text/javascript" src="imageFuncs.js"></script>
<script type="text/javascript">

showImages = function() {
	var drawingCanvas = document.getElementById("map");
	// Check the element is in the DOM and the browser supports canvas
	if (drawingCanvas.getContext) {
		var ctx = drawingCanvas.getContext("2d");
		var imageSources = new Array("map.jpg");
		var images = new Array();
		images = loadImages(imageSources);
		
		for (var i = 0; i < images.length; i++) {
			var img = new Image();
			img.src = images[i].src;
			img.onload = function(){
				ctx.drawImage(img,0,0,screen.width,screen.height);
			}
		}
	}
}
</script>
</head>
<body onload="showImages()">
<canvas id="map">Your browser does not support canvases...</canvas>
</body>
</html>

function loadImages(sources){
    var images = new Array();
    var loadedImages = 0;
    var numImages = 0;
    for (var src in sources) {
        numImages++;
    }
    for (var src in sources) {
        images[src] = new Image();
        images[src].src = sources[src];
    }
	return images;
}

<!doctype html>
<head>
<meta charset=UTF-8" />
<title>Crazy Rally - France</title>
<script type="text/javascript">
var frames = new Array();
	
//load frames into array
for(var i = 1; i < 417; i++){
	frames[i] = new Image(480,320);
	frames[i].src = "track" + i + ".png";
}

//playback
var currentFrameNumber = 1;
var fps = 30; // frames / second
const speed = 1000 / fps; // milliseconds
//var speed = 33;
      
function nextFrame( )
{
      	document.getElementById("display").src = frames[currentFrameNumber].src;
	currentFrameNumber = ( currentFrameNumber + 1 ) % frames.length;
       	setTimeout( nextFrame, speed );
}
window.onload = nextFrame;
</script>
</head>
<body>
<img id="display" src="track1.png" width="480" height="320">
</body>
</html>