Miss Sunshine and HTML Canvas: Let's Draw Some Circles!

I've realized that canvas combined with JavaScript is a powerful HTML element to create shapes, make animation and games.

I've created Miss Sunshine just with circles and lines. Let's dissect the code. First, create the canvas with <canvas> </canvas>. Get the context of canvas with variable of the canvas.getContext("2d") and store it in a variable.

Now the drawing begins! Create an object literal and store infos about what color to use, how circles and lins are drawn and the name of the function. Here is the syntax:

var x= {y:detailled information about the object}

We draw Miss Sunshine's head with the arc(x-coordinate,y-coordinate,radius,starting angle,ending angle) method. Now, a little bit of trigonometry is required.
Relax, just a little bit.
The total circumference of a circle (360°) is 2π thus to draw a circle the value of the starting angle is 0 and the ending angle 2π. Paint Miss Sunshine with your favourite color with fillyStyle="your color" and fill her with fill(). Here eyes and lips are created the same way. The lips are created with two small half circles and one big one. A half circle has the 180° (π) therefore the starting angle is π and the ending angle is 2π (or 0 to π depending on the direction).

Roll over the canvas and make her sky blue!

HTML and JavaScript Code

<html>
<body>
<canvas id="myCanvas" width="300" height="200"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>

var r;
//head of the sun
var sun=
{
paint:function(){
ctx.beginPath();
ctx.arc(150,100,40,0,2*Math.PI);
ctx.fillStyle="#FF9900";
ctx.fill();

//left part of the lip
ctx.beginPath();
ctx.arc(135,115,12,1*Math.PI,2*Math.PI);
ctx.fillStyle="red";
ctx.fill();

//right part of the lip
ctx.beginPath();
ctx.arc(161,115,12,1*Math.PI,2*Math.PI);
ctx.fillStyle="red";
ctx.fill();

//bottom part of the lip
ctx.beginPath();
ctx.arc(148,115,25,0*Math.PI,1*Math.PI);
ctx.fillStyle="red";
ctx.fill();

//left eye white
ctx.beginPath();
ctx.arc(135,85,15,0*Math.PI,2*Math.PI);
ctx.fillStyle="white";
ctx.fill();

//left eye black
ctx.beginPath();
ctx.arc(135,85,5,0*Math.PI,2*Math.PI);
ctx.fillStyle="black";
ctx.fill();

//right eye white
ctx.beginPath();
ctx.arc(165,85,15,0*Math.PI,2*Math.PI);
ctx.fillStyle="white";
ctx.fill();

//right eye black
ctx.beginPath();
ctx.arc(165,85,5,0*Math.PI,2*Math.PI);
ctx.fillStyle="black";
ctx.fill();

//sunray
ctx.beginPath();
ctx.lineCap="round";
ctx.lineWidth=10;
ctx.moveTo(50,100);
ctx.lineTo(100,100);

ctx.moveTo(60,30);
ctx.lineTo(100,70);

ctx.moveTo(150,10);
ctx.lineTo(150,50);

ctx.moveTo(240,40);
ctx.lineTo(200,70);

ctx.moveTo(210,100);
ctx.lineTo(260,100);

ctx.moveTo(250,160);
ctx.lineTo(200,130);

ctx.moveTo(150,150);
ctx.lineTo(150,190);

ctx.moveTo(60,170);
ctx.lineTo(110,140);

ctx.strokeStyle="#FF9900";
ctx.stroke();
ctx.fill();
}

};

function paint(){
sun.paint();
}

canvas.addEventListener('mouseover',function(e){
ctx.fillStyle="#99CCFF";
ctx.fillRect(0,0,canvas.width,canvas.height);
r=window.requestAnimationFrame(paint);
});

canvas.addEventListener('mouseout',
function(e){
ctx.fillStyle="white";
ctx.fillRect(0,0,canvas.width,canvas.height);
sun.paint();
window.cancelAnimationFrame(r);
});

sun.paint();

</script> 
</body>
</html>

Tiger Bird Webdesign

Monday, 11 May 2015

Miss Sunshine and HTML Canvas: Let's Draw Some Circles!

HTML and JavaScript Code