Scribd
Upload
24 views2 pages

HTML HTML: Doctype Doctype HTML Head Style

This document contains HTML and JavaScript code to dynamically draw a face shape within a canvas element. When the page loads, the drawShape() function is called which gets the canvas context and uses drawing methods like beginPath, arc, moveTo to draw circles and paths to create the outline of a face including eyes, mouth, and outer circle.

Uploaded by

Nandini Bargaje
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views2 pages

HTML HTML: Doctype Doctype HTML Head Style

This document contains HTML and JavaScript code to dynamically draw a face shape within a canvas element. When the page loads, the drawShape() function is called which gets the canvas context and uses drawing methods like beginPath, arc, moveTo to draw circles and paths to create the outline of a face including eyes, mouth, and outer circle.

Uploaded by

Nandini Bargaje
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE HTML>

<!DOCTYPE HTML>

<html>
<head>

<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>

<script type = "text/javascript">


function drawShape() {

// get the canvas element using the DOM


var canvas = document.getElementById('mycanvas');

// Make sure we don't execute when canvas isn't supported


if (canvas.getContext) {

// use getContext to use the canvas for drawing


var ctx = canvas.getContext('2d');

// Draw shapes
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle

ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth

ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye

ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>

<body id = "test" onload = "drawShape();">


<canvas id = "mycanvas"></canvas>
</body>

</html>

You might also like