function canvas(){
//Bsp 8:
var mein_canvas=document.getElementById('mein_canvas8');
if(mein_canvas.getContext){
  var context= mein_canvas.getContext('2d');
	var gradient = context.createRadialGradient(50,50, 100, 100,100, 50);
	gradient.addColorStop(0, '#FFF');
	gradient.addColorStop(0.5, '#0099ff');
	gradient.addColorStop(1, '#FFF');
	context.fillStyle = gradient;
	context.fillRect(0,0,context.canvas.width, context.canvas.height);
  }
	
//Bsp 7:
var mein_canvas=document.getElementById('mein_canvas7');
if(mein_canvas.getContext){
  var context= mein_canvas.getContext('2d');
	var gradient = context.createLinearGradient(0,0,context.canvas.width,0);
	gradient.addColorStop(0, '#FFF');
	gradient.addColorStop(0.25, '#0099ff');
	gradient.addColorStop(1, '#FFF');
	context.fillStyle = gradient;
	context.fillRect(0,0,context.canvas.width, context.canvas.height);
  }
	
//Bsp 6:
var mein_canvas=document.getElementById('mein_canvas6');
if(mein_canvas.getContext){
  var context= mein_canvas.getContext('2d');
  var img = new Image();
	img.src = "images/html5/html5_logo.png";
	context.drawImage(img, 0, 0, 150, 150);
	//Pixel für den Ausschnitt des Bildes Auslesen:
	var imgData = context.getImageData(30, 0, 50, 50);
	context.putImageData(imgData, 140, 140);
  }


//Bsp 5:
var mein_canvas=document.getElementById('mein_canvas5');
if(mein_canvas.getContext){
  var context= mein_canvas.getContext('2d');
  var img = new Image();
	img.src = "images/html5/html5_logo.png";
	  context.drawImage(img, 0, 0, 200, 200);
	
	
  }



//Bsp 1:
var mein_canvas=document.getElementById('mein_canvas1');
if(mein_canvas.getContext){
  var context= mein_canvas.getContext('2d');
  context.fillStyle ='#0099ff';
	context.fillRect(70,70,60,60);
  }
//Bsp 2:
var mein_canvas=document.getElementById('mein_canvas2');
if(mein_canvas.getContext){
  var context= mein_canvas.getContext('2d');
  context.fillStyle ='#0099ff';
	koordinatensystem_zeichnen(mein_canvas, context);
	context.fillRect(70,70,60,60);
  }
//Bsp 3:
var mein_canvas=document.getElementById('mein_canvas3');
if(mein_canvas.getContext){
  var context= mein_canvas.getContext('2d');
  context.fillStyle ='#0099ff';
	context.rotate(0.3);
	koordinatensystem_zeichnen(mein_canvas, context);
	context.fillRect(70,70,60,60);
  }

//Bsp 4:
var mein_canvas=document.getElementById('mein_canvas4');
if(mein_canvas.getContext){
  var context= mein_canvas.getContext('2d');
  context.fillStyle ='#0099ff';
	context.scale(1.5,1.5);
	koordinatensystem_zeichnen(mein_canvas, context);
	context.fillRect(70,70,60,60);
  }



}


function koordinatensystem_zeichnen(mein_canvas, context){
for(h=10; h<mein_canvas.height; h=h+10){
  context.beginPath();
	context.moveTo(0,h);
	context.lineTo(mein_canvas.width,h);
	context.stroke();
	context.closePath();
}	
	
for(w=10; w<mein_canvas.width; w=w+10){
  context.beginPath();
	context.moveTo(w,0);
	context.lineTo(w,mein_canvas.height);
	context.stroke();
	context.closePath();
}	


}