Scribd
Upload
7 views3 pages

P 18

Uploaded by

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

P 18

Uploaded by

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

<!

DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-


scale=1.0”>

<title>HTML5 Canvas Example</title>

<style>

Body { font-family: Arial, sans-serif; margin: 20px; }

Canvas { border: 1px solid #000; display: block; margin-bottom:


20px; }

</style>

</head>

<body>

<h1>HTML5 Canvas Example</h1>

<canvas id=”myCanvas” width=”600” height=”400”></canvas>

<button onclick=”drawRectangles()”>Draw Rectangles</button>

<button onclick=”drawCircles()”>Draw Circles</button>

<button onclick=”drawText()”>Draw Text</button>

<button onclick=”drawImage()”>Draw Image</button>

<button onclick=”clearCanvas()”>Clear Canvas</button>

<script>

Const canvas = document.getElementById(‘myCanvas’);

Const ctx = canvas.getContext(‘2d’);

// Draw Rectangles
Function drawRectangles() {

Ctx.fillStyle = ‘#FF0000’;

Ctx.fillRect(20, 20, 100, 50);

Ctx.strokeStyle = ‘#0000FF’;

Ctx.lineWidth = 5;

Ctx.strokeRect(150, 20, 100, 50);

Ctx.clearRect(180, 30, 40, 20);

// Draw Circles

Function drawCircles() {

Ctx.beginPath();

Ctx.arc(100, 150, 40, 0, Math.PI * 2, false);

Ctx.fillStyle = ‘green’;

Ctx.fill();

Ctx.beginPath();

Ctx.arc(250, 150, 40, 0, Math.PI * 2, false);

Ctx.strokeStyle = ‘purple’;

Ctx.lineWidth = 5;

Ctx.stroke();

// Draw Text

Function drawText() {
Ctx.font = ‘30px Arial’;

Ctx.fillStyle = ‘black’;

Ctx.fillText(‘Hello, Canvas!’, 20, 250);

Ctx.strokeStyle = ‘red’;

Ctx.lineWidth = 2;

Ctx.strokeText(‘Hello, Canvas!’, 20, 300);

// Draw Image

Function drawImage() {

Const img = new Image();

Img.onload = function() {

Ctx.drawImage(img, 350, 20, 200, 150);

Img.src = ‘https://via.placeholder.com/200’; // Replace with your


image URL

// Clear Canvas

Function clearCanvas() {

Ctx.clearRect(0, 0, canvas.width, canvas.height);

</script>

</body>

</html>

You might also like