Scribd
Upload
2 views4 pages

HTML Program 1

The document contains three HTML examples demonstrating the use of the canvas element for drawing shapes, including squares, rectangles, and Bezier curves. Each example includes JavaScript functions that utilize the canvas API to render graphics and handle image loading. The code checks for canvas support and alerts the user if their browser is not compatible.

Uploaded by

Sinchana
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
2 views4 pages

HTML Program 1

The document contains three HTML examples demonstrating the use of the canvas element for drawing shapes, including squares, rectangles, and Bezier curves. Each example includes JavaScript functions that utilize the canvas API to render graphics and handle image loading. The code checks for canvas support and alerts the user if their browser is not compatible.

Uploaded by

Sinchana
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/ 4

4)Square and Rectangle

<!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.fillStyle =”green";
ctx.fillRect(20,10,100,100);
ctx.translate(60,70);
ctx.fillStyle =”blue";
ctx.fillRect(10,30,140,80);
} 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>
5) Bezier Curve

<!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');

ctx.beginPath();
ctx.moveTo(75,40);

ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);

ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);

ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);

ctx.fill();
} 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>

6) Image

<html>
<head>

<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
var img = new Image();
img.src = '/images/backdrop.jpg';

img.onload = function() {
ctx.drawImage(img,0,0);
ctx.beginPath();

ctx.moveTo(30,96);
ctx.lineTo(70,66);

ctx.lineTo(103,76);
ctx.lineTo(170,15);

ctx.stroke();
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>

</html>

You might also like