Scribd
Upload
71 views2 pages

HTML Canvas

The <canvas> element in HTML allows for drawing graphics on a web page using JavaScript, enabling dynamic rendering of 2D shapes and images. Basic syntax includes creating a canvas area and accessing it with JavaScript to draw shapes like rectangles, circles, text, and lines. Common uses of <canvas> include creating graphs, games, animations, and real-time data visualizations.

Uploaded by

Ubaid Ahmad
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
71 views2 pages

HTML Canvas

The <canvas> element in HTML allows for drawing graphics on a web page using JavaScript, enabling dynamic rendering of 2D shapes and images. Basic syntax includes creating a canvas area and accessing it with JavaScript to draw shapes like rectangles, circles, text, and lines. Common uses of <canvas> include creating graphs, games, animations, and real-time data visualizations.

Uploaded by

Ubaid Ahmad
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/ 2

The <canvas> element in HTML is used to draw graphics on a

web page via scripting (usually JavaScript). It's a powerful tool


for creating dynamic, scriptable rendering of 2D shapes and
bitmap images.
🔹 Basic Syntax
html
CopyEdit
<canvas id="myCanvas" width="400" height="300"></canvas>
This creates a blank area on the page where you can draw using
JavaScript.
🔹 Accessing the Canvas with JavaScript
javascript
CopyEdit
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d"); // "2d" is for 2D rendering
context
🔹 Drawing Examples
1. Draw a Rectangle
javascript
CopyEdit
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 75); // x, y, width, height
2. Draw a Circle
javascript
CopyEdit
ctx.beginPath();
ctx.arc(150, 100, 40, 0, 2 * Math.PI); // x, y, radius, startAngle,
endAngle
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke(); // optional: draw the circle's border
3. Draw Text
javascript
CopyEdit
ctx.font = "20px Arial";
ctx.fillStyle = "green";
ctx.fillText("Hello Canvas", 100, 200);
4. Draw a Line
javascript
CopyEdit
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(200, 100);
ctx.strokeStyle = "black";
ctx.stroke();
🔹 Common Uses of <canvas>
 Drawing graphs and charts

 Making simple games

 Animations and visual effects

 Real-time data visualizations

 Photo and image editing

You might also like