canvas smilie

by basti1012

HTML

<canvas width ="600" height="450" id="smile">
                 Dein Browser unterstĂĽtzt kein HTML!</canvas>

CSS

canvas {
       border: 1px solid black;
     }

JavaScript

var canvas = document.getElementById("smile");
var kontext = canvas.getContext("2d");
 function gradInRadient(grad){
	return (grad*Math.PI)/80;
}
 
 	kontext.beginPath();
  kontext.arc(250,200,180,0,2*Math.PI,true);
 	kontext.fillStyle = "yellow";
 	kontext.fill();
 
 x=250;
 y=170;
 
	kontext.beginPath();
kontext.arc(250,230,Math.floor(140/2),0,gradInRadient(80),false);
	kontext.fillStyle = "red";
	kontext.fill();	

 
	kontext.beginPath();
	kontext.arc(x-50,y-45,20,0,2*Math.PI,true);
	kontext.fillStyle = "black";
	kontext.fill();
	kontext.beginPath();
	kontext.arc(x+50,y-45,20,0,2*Math.PI,true);
	kontext.fillStyle = "black";
	kontext.fill();