Scribd
Upload
45 views3 pages

Canvas

PROGRAMMING

Uploaded by

10300 PEDDI KISHOR
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
45 views3 pages

Canvas

PROGRAMMING

Uploaded by

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

Sure!

Here’s an overview of CSS3, HTML5 Canvas, and an example of creating a simple


website using these technologies.

### 1. CSS3

**Definition**: CSS3 is the latest version of Cascading Style Sheets, which is used
to style and layout web pages. It includes features like animations, transitions,
and flexible box layouts.

#### Example: Basic CSS3 Styles

```css
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}

h1 {
color: #333;
text-align: center;
}

.button {
display: inline-block;
padding: 10px 20px;
background-color: #28a745;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}

.button:hover {
background-color: #218838;
}
```

### 2. HTML5 Canvas

**Definition**: The `<canvas>` element in HTML5 is used to draw graphics via


scripting (usually JavaScript). It allows for dynamic, scriptable rendering of 2D
shapes and bitmap images.

#### Example: Drawing on Canvas

```html
<canvas id="myCanvas" width="400" height="200" style="border:1px solid
#000000;"></canvas>

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Draw a rectangle
ctx.fillStyle = "#FF0000"; // Red color
ctx.fillRect(20, 20, 150, 100); // x, y, width, height
// Draw a circle
ctx.beginPath();
ctx.arc(240, 70, 40, 0, Math.PI * 2); // x, y, radius, start angle, end angle
ctx.fillStyle = "#00FF00"; // Green color
ctx.fill();
ctx.closePath();
</script>
```

### 3. Creating a Simple Website

Here’s an example of a simple website that uses both CSS3 for styling and an HTML5
Canvas for drawing graphics.

#### Complete Example: Simple Website with CSS3 and Canvas

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Website with Canvas</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to the CSS file -->
<style>
/* Inline CSS for simplicity */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}

h1 {
color: #333;
text-align: center;
}

.button {
display: inline-block;
padding: 10px 20px;
background-color: #28a745;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}

.button:hover {
background-color: #218838;
}

.canvas-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
</style>
</head>
<body>

<h1>Welcome to My Simple Website</h1>


<a href="#" class="button">Click Me!</a>

<div class="canvas-container">
<canvas id="myCanvas" width="400" height="200" style="border:1px solid
#000000;"></canvas>
</div>

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Draw a rectangle
ctx.fillStyle = "#FF0000"; // Red color
ctx.fillRect(20, 20, 150, 100); // x, y, width, height

// Draw a circle
ctx.beginPath();
ctx.arc(240, 70, 40, 0, Math.PI * 2); // x, y, radius, start angle, end
angle
ctx.fillStyle = "#00FF00"; // Green color
ctx.fill();
ctx.closePath();
</script>

</body>
</html>
```

### Explanation

1. **HTML Structure**: The HTML file includes a title, a button, and a canvas
element where graphics will be drawn.
2. **CSS Styles**: The styles are applied to the body, heading, and button for
basic layout and appearance.
3. **Canvas Drawing**: The JavaScript code draws a red rectangle and a green circle
on the canvas.

### Running the Example

1. **Create the HTML file**: Save the complete example code above in an HTML file
(e.g., `index.html`).
2. **Open in a Browser**: Open the HTML file in a web browser to view the website.
3. **Interactivity**: You can click the "Click Me!" button, and you'll see the
canvas with the red rectangle and green circle drawn on it.

This example showcases how to use CSS3 for styling and HTML5 Canvas for drawing
graphics in a simple website. You can expand upon this foundation by adding more
features and interactivity!

You might also like