Scribd
Upload
11 views2 pages

Canvas

The document contains HTML code that sets up a web page with a canvas element for drawing shapes using JavaScript. A function named 'drawShape' is defined to create a color pattern on the canvas. Additionally, there is a simple registration form with a text input for a name and a submit button.

Uploaded by

soulyemanbamba
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
11 views2 pages

Canvas

The document contains HTML code that sets up a web page with a canvas element for drawing shapes using JavaScript. A function named 'drawShape' is defined to create a color pattern on the canvas. Additionally, there is a simple registration form with a text input for a name and a submit button.

Uploaded by

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

// use getContext to use the canvas for drawing


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

// Create a pattern
for (var i=0;i<7;i++)
{

for (var j=0;j<7;j++)


{
ctx.fillStyle='rgb(' + Math.floor(255-20.5*i)+ ','+ Math.floor(255 - 42.5*j) + ',255)';
ctx.fillRect( j*25, i* 25, 55, 55 );
}
}
}
</script>
</head>

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


</br></br>
<canvas id="mycanvas"></canvas>
<!-- Text Input using <input> tag -->

<!DOCTYPE html>
<html>
<head>
<title> Input Field </title>
</head>

<body>
<form>

<h2>Registration</h2>

Name: <input type="text" size="10" maxlength="30"> </br> </br>

<input type="Submit" value="Submit">

</form>
</body>
</html>
</body>

</html>

You might also like