[go: up one dir, main page]
Scribd
Upload
20 views2 pages

HTML Canvas Drawing Basics

The document contains HTML, CSS, and JavaScript code to render a red rectangle on a canvas element. The HTML defines a canvas with an ID of "myCanvas". The CSS centers the canvas on the page and sets its border. The JavaScript gets the canvas context, sets the fill color to red, and draws a filled rectangle at coordinates 50,50 with a width and height of 100 and 75 pixels respectively.

Uploaded by

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

HTML Canvas Drawing Basics

The document contains HTML, CSS, and JavaScript code to render a red rectangle on a canvas element. The HTML defines a canvas with an ID of "myCanvas". The CSS centers the canvas on the page and sets its border. The JavaScript gets the canvas context, sets the fill color to red, and draws a filled rectangle at coordinates 50,50 with a width and height of 100 and 75 pixels respectively.

Uploaded by

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

[11/16, 10:29 AM] <B.ISAH/>👊🏼👊🏼🤜🏼🤜🏼: <!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="styles.css">

<title>Canvas Example</title>

</head>

<body>

<canvas id="myCanvas" width="400" height="200"></canvas>

<script src="script.js"></script>

</body>

</html>

[11/16, 10:29 AM] <B.ISAH/>👊🏼👊🏼🤜🏼🤜🏼: body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

canvas {

border: 1px solid #000;

[11/16, 10:29 AM] <B.ISAH/>👊🏼👊🏼🤜🏼🤜🏼: document.addEventListener("DOMContentLoaded", function () {


// Get the canvas element and its context

var canvas = document.getElementById("myCanvas");

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

// Draw a rectangle on the canvas

ctx.fillStyle = "#FF0000"; // Fill color: red

ctx.fillRect(50, 50, 100, 75); // Rectangle coordinates (x, y, width, height)

});

You might also like