Scribd
Upload
3 views2 pages

Draw Shapes with JavaScript Canvas

The document is an HTML file that demonstrates how to draw shapes using JavaScript on a canvas element. It includes code to draw a light blue rectangle, a red line, and a green circle with a black outline. The canvas is set to a width of 400 pixels and a height of 300 pixels.

Uploaded by

yungdenno130
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
3 views2 pages

Draw Shapes with JavaScript Canvas

The document is an HTML file that demonstrates how to draw shapes using JavaScript on a canvas element. It includes code to draw a light blue rectangle, a red line, and a green circle with a black outline. The canvas is set to a width of 400 pixels and a height of 300 pixels.

Uploaded by

yungdenno130
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

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Draw Object in JavaScript</title>

</head>

<body>

<!-- Canvas area -->

<canvas id="myCanvas" width="400" height="300" style="border:1px


solid #000000;"></canvas>

<script>

// Get the canvas element and its drawing context

const canvas = [Link]('myCanvas');

const ctx = [Link]('2d');

// Draw a rectangle

[Link] = "lightblue";

[Link](50, 50, 100, 60); // (x, y, width, height)

// Draw a line

[Link]();

[Link](50, 150);

[Link](200, 150);

[Link] = "red";

[Link] = 3;
[Link]();

// Draw a circle

[Link]();

[Link](250, 100, 40, 0, 2 * [Link]);

[Link] = "green";

[Link]();

[Link] = "black";

[Link]();

</script>

</body>

</html>

You might also like