HTML Canvas is an element used to draw graphics dynamically on a web page using JavaScript. It acts as a container for rendering shapes, text, images, and animations.
- Requires JavaScript to draw graphics on the canvas.
- Supports drawing paths, rectangles, circles, text, and images.
- Represents a rectangular drawing area on a webpage.
- Has no border or content by default unless styled or scripted.
<!DOCTYPE html>
<html>
<body>
<canvas id="gfg"
width="300px"
height="100px"
style="border:1px solid #d3d3d3;">
</canvas>
<script>
let g = document.getElementById("gfg");
let geeks = g.getContext("2d");
let gradient = geeks.createLinearGradient(1, 4, g.width, 2);
gradient.addColorStop("0", "green");
gradient.addColorStop("0.4", "yellow");
gradient.addColorStop("1.0", "aqua");
geeks.font = "40px sans-serif";
geeks.fillStyle = "red";
geeks.strokeStyle = gradient;
geeks.strokeText("GeeksforGeeks", 10, 60);
</script>
</body>
</html>
Here, By using of canvas with a linear gradient & stroke-style text in HTML.
Syntax:
<canvas>
Content...
</canvas>Note: It is recommended to have an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute.
Supported Properties of HTML Canvas
| Canvas Property | Description |
|---|---|
| Colors and Styles | Used to set fill color, stroke color, and styling for shapes and text. |
| Shadows | Adds shadow effects to shapes and text drawn on the canvas. |
| Line Styles | Controls line width, line caps, and line joins for strokes. |
| Rectangles | Used to draw and manipulate rectangular shapes on the canvas. |
| Paths | Allows drawing custom shapes using lines and curves. |
| Transformations | Enables scaling, rotating, translating, and skewing canvas objects. |
| Text | Used to draw and style text on the canvas area. |
| Pixel Manipulation | Allows direct access and modification of pixel data. |
| Compositing | Controls how new drawings are combined with existing content. |
| Image Drawing | Used to draw images onto the canvas from external sources. |
Drawing Shapes and Graphics Using HTML Canvas
There are various shapes that can be possible to draw using Canvas, which are discussed below.
Example 1: To demonstrates the empty canvas
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"
width="400"
height="200"
style="border:2px solid #000000;">
</canvas>
</body>
</html>
Example 2: Using HTML Canvas to draw a circle
<!DOCTYPE html>
<html>
<head>
<title>Circle Drawing</title>
</head>
<body>
<canvas id="GFG" width="400" height="200" style="border:2px solid #d3d3d3;"></canvas>
<script>
let g = document.getElementById("GFG");
let geeks = g.getContext("2d");
geeks.beginPath();
geeks.arc(200, 100, 50, 0, 2 * Math.PI);
geeks.stroke();
</script>
</body>
</html>
Example 3: Write a text using HTML Canvas.
<!DOCTYPE html>
<html>
<body>
<canvas id="GFG"
width="600"
height="200"
style="border:1px solid #d3d3d3;">
</canvas>
<script>
let g = document.getElementById("GFG");
let geeks = g.getContext("2d");
geeks.font = "30px Arial";
geeks.fillText("GeeksForGeeks", 170, 50);
</script>
</body>
</html>
Example 4: Use of linear-gradient property in HTML Canvas.
<!DOCTYPE html>
<html>
<body>
<canvas id="GFG"
width="400"
height="200"
style="border:2px solid #d3d3d3;">
</canvas>
<script>
let G = document.getElementById("GFG");
let geeks = G.getContext("2d");
let grd = geeks.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "yellow");
grd.addColorStop(1, "grey");
geeks.fillStyle = grd;
geeks.fillRect(50, 50, 300, 80);
</script>
</body>
</html>
Example 5: Draw the image by using the canvas tag.
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="image"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210916184234/gfg3-300x300.png"
alt="GeeksforGeeks logo"
width="250"
height="200">
<p>Canvas to fill:</p>
<canvas id="gfg"
width="300"
height="300"
style="border:1px solid #d3d3d3; ">
</canvas>
<p>
<button onclick="gfg()">
Click to Try
</button>
</p>
<script>
function gfg() {
let g = document.getElementById("gfg");
let geeks = g.getContext("2d");
let img = document.getElementById("image");
geeks.drawImage(img, 0, 0);
}
</script>
</body>
</html>
Output:
Example 6: Using the Shadow blur property in HTML Canvas.
<!DOCTYPE html>
<html>
<body>
<canvas id="GFG"
width="500"
height="250" ;>
</canvas>
<script>
let g = document.getElementById("GFG");
let geeks = g.getContext("2d");
geeks.shadowBlur = 20;
geeks.shadowColor = "yellow";
geeks.fillStyle = "red";
geeks.fillRect(30, 20, 100, 80);
</script>
</body>
</html>
Output:
Example 7: Use rotate() method in the HTML Canvas.
<!DOCTYPE html>
<html>
<body>
<canvas id="GFG"
width="300"
height="150;">
</canvas>
<script>
let g = document.getElementById("GFG");
let geeks = g.getContext("2d");
geeks.rotate(20 * Math.PI / 180);
geeks.fillRect(100, 20, 100, 50);
</script>
</body>
</html>
Example 8: By using the translate() method to remap the (0,0) position on the canvas.
<!DOCTYPE html>
<html>
<body>
<canvas id="GFG"
width="300"
height="150;">
</canvas>
<script>
let g = document.getElementById("GFG");
let geeks = g.getContext("2d");
geeks.fillRect(10, 10, 100, 50);
geeks.translate(80, 90);
geeks.fillRect(10, 10, 100, 50);
</script>
</body>
</html>
Output:
Example 9: By using the transform() method in HTML Canvas.
<!DOCTYPE html>
<html>
<body>
<canvas id="GFG"
width="300"
height="150;">
</canvas>
<script>
let g = document.getElementById("GFG");
let geeks = g.getContext("2d");
geeks.fillStyle = "yellow";
geeks.fillRect(0, 0, 250, 100)
geeks.transform(1, 0.5, -0.5, 1, 30, 10);
geeks.fillStyle = "grey";
geeks.fillRect(0, 0, 250, 100);
geeks.transform(1, 0.5, -0.5, 1, 30, 10);
geeks.fillStyle = "black";
geeks.fillRect(0, 0, 250, 100);
</script>
</body>
</html>
Creating Animation in HTML Canvas
Animation in an HTML5 canvas is created using JavaScript to draw and update graphics repeatedly over time. By controlling the timing of redraws, objects on the canvas appear to move or change, creating an animation effect.
- JavaScript controls canvas animation by repeatedly updating drawings at specific time intervals.
- setInterval(callback, time) runs a function continuously after every fixed time delay, making it suitable for simple animations.
- setTimeout(callback, time) runs a function only once after a delay and is often used recursively for controlled animations.
- These timing methods help manage frame updates, movement speed, and smooth visual effects on the canvas.